u-notify.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <u-transition
  3. mode="slide-down"
  4. :customStyle="containerStyle"
  5. :show="open"
  6. >
  7. <view
  8. class="u-notify"
  9. :class="[`u-notify--${tmpConfig.type}`]"
  10. :style="[backgroundColor, $u.addStyle(customStyle)]"
  11. >
  12. <u-status-bar v-if="tmpConfig.safeAreaInsetTop"></u-status-bar>
  13. <view class="u-notify__warpper">
  14. <slot name="icon">
  15. <u-icon
  16. v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
  17. :name="tmpConfig.icon"
  18. :color="tmpConfig.color"
  19. :size="1.3 * tmpConfig.fontSize"
  20. :customStyle="{marginRight: '4px'}"
  21. ></u-icon>
  22. </slot>
  23. <text
  24. class="u-notify__warpper__text"
  25. :style="{
  26. fontSize: $u.addUnit(tmpConfig.fontSize),
  27. color: tmpConfig.color
  28. }"
  29. >{{ tmpConfig.message }}</text>
  30. </view>
  31. </view>
  32. </u-transition>
  33. </template>
  34. <script>
  35. import props from './props.js';
  36. /**
  37. * notify 顶部提示
  38. * @description 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景
  39. * @tutorial
  40. * @property {String | Number} top 到顶部的距离 ( 默认 0 )
  41. * @property {String} type 主题,primary,success,warning,error ( 默认 'primary' )
  42. * @property {String} color 字体颜色 ( 默认 '#ffffff' )
  43. * @property {String} bgColor 背景颜色
  44. * @property {String} message 展示的文字内容
  45. * @property {String | Number} duration 展示时长,为0时不消失,单位ms ( 默认 3000 )
  46. * @property {String | Number} fontSize 字体大小 ( 默认 15 )
  47. * @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离(状态栏高度) ( 默认 false )
  48. * @property {Object} customStyle 组件的样式,对象形式
  49. * @event {Function} open 开启组件时调用的函数
  50. * @event {Function} close 关闭组件式调用的函数
  51. * @example <u-notify message="Hi uView"></u-notify>
  52. */
  53. export default {
  54. name: 'u-notify',
  55. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  56. data() {
  57. return {
  58. // 是否展示组件
  59. open: false,
  60. timer: null,
  61. config: {
  62. // 到顶部的距离
  63. top: uni.$u.props.notify.top,
  64. // type主题,primary,success,warning,error
  65. type: uni.$u.props.notify.type,
  66. // 字体颜色
  67. color: uni.$u.props.notify.color,
  68. // 背景颜色
  69. bgColor: uni.$u.props.notify.bgColor,
  70. // 展示的文字内容
  71. message: uni.$u.props.notify.message,
  72. // 展示时长,为0时不消失,单位ms
  73. duration: uni.$u.props.notify.duration,
  74. // 字体大小
  75. fontSize: uni.$u.props.notify.fontSize,
  76. // 是否留出顶部安全距离(状态栏高度)
  77. safeAreaInsetTop: uni.$u.props.notify.safeAreaInsetTop
  78. },
  79. // 合并后的配置,避免多次调用组件后,可能会复用之前使用的配置参数
  80. tmpConfig: {}
  81. }
  82. },
  83. computed: {
  84. containerStyle() {
  85. let top = 0
  86. if (this.tmpConfig.top === 0) {
  87. // #ifdef H5
  88. // H5端,导航栏为普通元素,需要将组件移动到导航栏的下边沿
  89. // H5的导航栏高度为44px
  90. top = 44
  91. // #endif
  92. }
  93. const style = {
  94. top: uni.$u.addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
  95. // 因为组件底层为u-transition组件,必须将其设置为fixed定位
  96. // 让其出现在导航栏底部
  97. position: 'fixed',
  98. left: 0,
  99. right: 0,
  100. zIndex: 10076
  101. }
  102. return style
  103. },
  104. // 组件背景颜色
  105. backgroundColor() {
  106. const style = {}
  107. if (this.tmpConfig.bgColor) {
  108. style.backgroundColor = this.tmpConfig.bgColor
  109. }
  110. return style
  111. },
  112. // 默认主题下的图标
  113. icon() {
  114. let icon
  115. if (this.tmpConfig.type === 'success') {
  116. icon = 'checkmark-circle'
  117. } else if (this.tmpConfig.type === 'error') {
  118. icon = 'close-circle'
  119. } else if (this.tmpConfig.type === 'warning') {
  120. icon = 'error-circle'
  121. }
  122. return icon
  123. }
  124. },
  125. created() {
  126. // 通过主题的形式调用toast,批量生成方法函数
  127. ['primary', 'success', 'error', 'warning'].map(item => {
  128. this[item] = message => this.show({
  129. type: item,
  130. message
  131. })
  132. })
  133. },
  134. methods: {
  135. show(options) {
  136. // 不将结果合并到this.config变量,避免多次调用u-toast,前后的配置造成混乱
  137. this.tmpConfig = uni.$u.deepMerge(this.config, options)
  138. // 任何定时器初始化之前,都要执行清除操作,否则可能会造成混乱
  139. this.clearTimer()
  140. this.open = true
  141. if (this.tmpConfig.duration > 0) {
  142. this.timer = setTimeout(() => {
  143. this.open = false
  144. // 倒计时结束,清除定时器,隐藏toast组件
  145. this.clearTimer()
  146. // 判断是否存在callback方法,如果存在就执行
  147. typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
  148. }, this.tmpConfig.duration)
  149. }
  150. },
  151. // 关闭notify
  152. close() {
  153. this.clearTimer()
  154. },
  155. clearTimer() {
  156. this.open = false
  157. // 清除定时器
  158. clearTimeout(this.timer)
  159. this.timer = null
  160. }
  161. },
  162. beforeDestroy() {
  163. this.clearTimer()
  164. }
  165. }
  166. </script>
  167. <style lang="scss" scoped>
  168. @import "../../libs/css/components.scss";
  169. $u-notify-padding: 8px 10px !default;
  170. $u-notify-text-font-size: 15px !default;
  171. $u-notify-primary-bgColor: $u-primary !default;
  172. $u-notify-success-bgColor: $u-success !default;
  173. $u-notify-error-bgColor: $u-error !default;
  174. $u-notify-warning-bgColor: $u-warning !default;
  175. .u-notify {
  176. padding: $u-notify-padding;
  177. &__warpper {
  178. @include flex;
  179. align-items: center;
  180. text-align: center;
  181. justify-content: center;
  182. &__text {
  183. font-size: $u-notify-text-font-size;
  184. text-align: center;
  185. }
  186. }
  187. &--primary {
  188. background-color: $u-notify-primary-bgColor;
  189. }
  190. &--success {
  191. background-color: $u-notify-success-bgColor;
  192. }
  193. &--error {
  194. background-color: $u-notify-error-bgColor;
  195. }
  196. &--warning {
  197. background-color: $u-notify-warning-bgColor;
  198. }
  199. }
  200. </style>