u-toast.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <template>
  2. <view class="u-toast">
  3. <u-overlay
  4. :show="isShow"
  5. :custom-style="overlayStyle"
  6. >
  7. <view
  8. class="u-toast__content"
  9. :style="[contentStyle]"
  10. :class="['u-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ? 'u-toast__content--loading' : '']"
  11. >
  12. <u-loading-icon
  13. v-if="tmpConfig.type === 'loading'"
  14. mode="circle"
  15. color="rgb(255, 255, 255)"
  16. inactiveColor="rgb(120, 120, 120)"
  17. size="25"
  18. ></u-loading-icon>
  19. <u-icon
  20. v-else-if="tmpConfig.type !== 'defalut' && iconName"
  21. :name="iconName"
  22. size="17"
  23. :color="tmpConfig.type"
  24. :customStyle="iconStyle"
  25. ></u-icon>
  26. <u-gap
  27. v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
  28. height="12"
  29. bgColor="transparent"
  30. ></u-gap>
  31. <text
  32. class="u-toast__content__text"
  33. :class="['u-toast__content__text--' + tmpConfig.type]"
  34. style="max-width: 400rpx;"
  35. >{{ tmpConfig.message }}</text>
  36. </view>
  37. </u-overlay>
  38. </view>
  39. </template>
  40. <script>
  41. /**
  42. * toast 消息提示
  43. * @description 此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方。
  44. * @tutorial https://www.uviewui.com/components/toast.html
  45. * @property {String | Number} zIndex toast展示时的zIndex值 (默认 10090 )
  46. * @property {Boolean} loading 是否加载中 (默认 false )
  47. * @property {String | Number} message 显示的文字内容
  48. * @property {String} icon 图标,或者绝对路径的图片
  49. * @property {String} type 主题类型 (默认 default)
  50. * @property {Boolean} show 是否显示该组件 (默认 false)
  51. * @property {Boolean} overlay 是否显示透明遮罩,防止点击穿透 (默认 false )
  52. * @property {String} position 位置 (默认 'center' )
  53. * @property {Object} params 跳转的参数
  54. * @property {String | Number} duration 展示时间,单位ms (默认 2000 )
  55. * @property {Boolean} isTab 是否返回的为tab页面 (默认 false )
  56. * @property {String} url toast消失后是否跳转页面,有则跳转,优先级高于back参数
  57. * @property {Function} complete 执行完后的回调函数
  58. * @property {Boolean} back 结束toast是否自动返回上一页 (默认 false )
  59. * @property {Object} customStyle 组件的样式,对象形式
  60. * @event {Function} show 显示toast,如需一进入页面就显示toast,请在onReady生命周期调用
  61. * @example <u-toast ref="uToast" />
  62. */
  63. export default {
  64. name: 'u-toast',
  65. mixins: [uni.$u.mpMixin, uni.$u.mixin],
  66. data() {
  67. return {
  68. isShow: false,
  69. timer: null, // 定时器
  70. config: {
  71. message: '', // 显示文本
  72. type: '', // 主题类型,primary,success,error,warning,black
  73. duration: 2000, // 显示的时间,毫秒
  74. icon: true, // 显示的图标
  75. position: 'center', // toast出现的位置
  76. complete: null, // 执行完后的回调函数
  77. overlay: false, // 是否防止触摸穿透
  78. loading: false, // 是否加载中状态
  79. },
  80. tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
  81. }
  82. },
  83. computed: {
  84. iconName() {
  85. // 只有不为none,并且type为error|warning|succes|info时候,才显示图标
  86. if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
  87. return '';
  88. }
  89. if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
  90. return uni.$u.type2icon(this.tmpConfig.type)
  91. } else {
  92. return ''
  93. }
  94. },
  95. overlayStyle() {
  96. const style = {
  97. justifyContent: 'center',
  98. alignItems: 'center',
  99. display: 'flex'
  100. }
  101. // 将遮罩设置为100%透明度,避免出现灰色背景
  102. style.backgroundColor = 'rgba(0, 0, 0, 0)'
  103. return style
  104. },
  105. iconStyle() {
  106. const style = {}
  107. // 图标需要一个右边距,以跟右边的文字有隔开的距离
  108. style.marginRight = '4px'
  109. // #ifdef APP-NVUE
  110. // iOSAPP下,图标有1px的向下偏移,这里进行修正
  111. if (uni.$u.os() === 'ios') {
  112. style.marginTop = '-1px'
  113. }
  114. // #endif
  115. return style
  116. },
  117. loadingIconColor() {
  118. let color = 'rgb(255, 255, 255)'
  119. if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
  120. // loading-icon组件内部会对color参数进行一个透明度处理,该方法要求传入的颜色值
  121. // 必须为rgb格式的,所以这里做一个处理
  122. color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type])
  123. }
  124. return color
  125. },
  126. // 内容盒子的样式
  127. contentStyle() {
  128. const windowHeight = uni.$u.sys().windowHeight, style = {}
  129. let value = 0
  130. // 根据top和bottom,对Y轴进行窗体高度的百分比偏移
  131. if(this.tmpConfig.position === 'top') {
  132. value = - windowHeight * 0.25
  133. } else if(this.tmpConfig.position === 'bottom') {
  134. value = windowHeight * 0.25
  135. }
  136. style.transform = `translateY(${value}px)`
  137. return style
  138. }
  139. },
  140. created() {
  141. // 通过主题的形式调用toast,批量生成方法函数
  142. ['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => {
  143. this[item] = message => this.show({
  144. type: item,
  145. message
  146. })
  147. })
  148. },
  149. methods: {
  150. // 显示toast组件,由父组件通过this.$refs.xxx.show(options)形式调用
  151. show(options) {
  152. // 不将结果合并到this.config变量,避免多次调用u-toast,前后的配置造成混乱
  153. this.tmpConfig = uni.$u.deepMerge(this.config, options)
  154. // 清除定时器
  155. this.clearTimer()
  156. this.isShow = true
  157. this.timer = setTimeout(() => {
  158. // 倒计时结束,清除定时器,隐藏toast组件
  159. this.clearTimer()
  160. // 判断是否存在callback方法,如果存在就执行
  161. typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
  162. }, this.tmpConfig.duration)
  163. },
  164. // 隐藏toast组件,由父组件通过this.$refs.xxx.hide()形式调用
  165. hide() {
  166. this.clearTimer()
  167. },
  168. clearTimer() {
  169. this.isShow = false
  170. // 清除定时器
  171. clearTimeout(this.timer)
  172. this.timer = null
  173. }
  174. },
  175. beforeDestroy() {
  176. this.clearTimer()
  177. }
  178. }
  179. </script>
  180. <style lang="scss" scoped>
  181. @import "../../libs/css/components.scss";
  182. $u-toast-color:#fff !default;
  183. $u-toast-border-radius:4px !default;
  184. $u-toast-border-background-color:#585858 !default;
  185. $u-toast-border-font-size:14px !default;
  186. $u-toast-border-padding:12px 20px !default;
  187. $u-toast-loading-border-padding: 20px 20px !default;
  188. $u-toast-content-text-color:#fff !default;
  189. $u-toast-content-text-font-size:15px !default;
  190. $u-toast-u-icon:10rpx !default;
  191. $u-toast-u-type-primary-color:$u-primary !default;
  192. $u-toast-u-type-primary-background-color:#ecf5ff !default;
  193. $u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default;
  194. $u-toast-u-type-primary-border-width:1px !default;
  195. $u-toast-u-type-success-color: $u-success !default;
  196. $u-toast-u-type-success-background-color: #dbf1e1 !default;
  197. $u-toast-u-type-success-border-color: #BEF5C8 !default;
  198. $u-toast-u-type-success-border-width: 1px !default;
  199. $u-toast-u-type-error-color:$u-error !default;
  200. $u-toast-u-type-error-background-color:#fef0f0 !default;
  201. $u-toast-u-type-error-border-color:#fde2e2 !default;
  202. $u-toast-u-type-error-border-width: 1px !default;
  203. $u-toast-u-type-warning-color:$u-warning !default;
  204. $u-toast-u-type-warning-background-color:#fdf6ec !default;
  205. $u-toast-u-type-warning-border-color:#faecd8 !default;
  206. $u-toast-u-type-warning-border-width: 1px !default;
  207. $u-toast-u-type-default-color:#fff !default;
  208. $u-toast-u-type-default-background-color:#585858 !default;
  209. .u-toast {
  210. &__content {
  211. @include flex;
  212. padding: $u-toast-border-padding;
  213. border-radius: $u-toast-border-radius;
  214. background-color: $u-toast-border-background-color;
  215. color: $u-toast-color;
  216. align-items: center;
  217. /* #ifndef APP-NVUE */
  218. max-width: 600rpx;
  219. /* #endif */
  220. position: relative;
  221. &--loading {
  222. flex-direction: column;
  223. padding: $u-toast-loading-border-padding;
  224. }
  225. &__text {
  226. color: $u-toast-content-text-color;
  227. font-size: $u-toast-content-text-font-size;
  228. line-height: $u-toast-content-text-font-size;
  229. &--default {
  230. color: $u-toast-content-text-color;
  231. }
  232. &--error {
  233. color: $u-error;
  234. }
  235. &--primary {
  236. color: $u-primary;
  237. }
  238. &--success {
  239. color: $u-success;
  240. }
  241. &--warning {
  242. color: $u-warning;
  243. }
  244. }
  245. }
  246. }
  247. .u-type-primary {
  248. color: $u-toast-u-type-primary-color;
  249. background-color: $u-toast-u-type-primary-background-color;
  250. border-color: $u-toast-u-type-primary-border-color;
  251. border-width: $u-toast-u-type-primary-border-width;
  252. }
  253. .u-type-success {
  254. color: $u-toast-u-type-success-color;
  255. background-color: $u-toast-u-type-success-background-color;
  256. border-color: $u-toast-u-type-success-border-color;
  257. border-width: 1px;
  258. }
  259. .u-type-error {
  260. color: $u-toast-u-type-error-color;
  261. background-color: $u-toast-u-type-error-background-color;
  262. border-color: $u-toast-u-type-error-border-color;
  263. border-width: $u-toast-u-type-error-border-width;
  264. }
  265. .u-type-warning {
  266. color: $u-toast-u-type-warning-color;
  267. background-color: $u-toast-u-type-warning-background-color;
  268. border-color: $u-toast-u-type-warning-border-color;
  269. border-width: 1px;
  270. }
  271. .u-type-default {
  272. color: $u-toast-u-type-default-color;
  273. background-color: $u-toast-u-type-default-background-color;
  274. }
  275. </style>