u-toast.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]" :style="{
  3. zIndex: uZIndex
  4. }">
  5. <view class="u-icon-wrap">
  6. <u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon>
  7. </view>
  8. <text class="u-text">{{tmpConfig.title}}</text>
  9. </view>
  10. </template>
  11. <script>
  12. /**
  13. * toast 消息提示
  14. * @description 此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方。
  15. * @tutorial https://www.uviewui.com/components/toast.html
  16. * @property {String} z-index toast展示时的z-index值
  17. * @event {Function} show 显示toast,如需一进入页面就显示toast,请在onReady生命周期调用
  18. * @example <u-toast ref="uToast" />
  19. */
  20. export default {
  21. name: "u-toast",
  22. props: {
  23. // z-index值
  24. zIndex: {
  25. type: [Number, String],
  26. default: ''
  27. },
  28. },
  29. data() {
  30. return {
  31. isShow: false,
  32. timer: null, // 定时器
  33. config: {
  34. params: {}, // URL跳转的参数,对象
  35. title: '', // 显示文本
  36. type: '', // 主题类型,primary,success,error,warning,black
  37. duration: 2000, // 显示的时间,毫秒
  38. isTab: false, // 是否跳转tab页面
  39. url: '', // toast消失后是否跳转页面,有则跳转,优先级高于back参数
  40. icon: true, // 显示的图标
  41. position: 'center', // toast出现的位置
  42. callback: null, // 执行完后的回调函数
  43. back: false, // 结束toast是否自动返回上一页
  44. },
  45. tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
  46. };
  47. },
  48. computed: {
  49. iconName() {
  50. // 只有不为none,并且type为error|warning|succes|info时候,才显示图标
  51. if (['error', 'warning', 'success', 'info'].indexOf(this.tmpConfig.type) >= 0 && this.tmpConfig.icon) {
  52. let icon = this.$u.type2icon(this.tmpConfig.type);
  53. return icon;
  54. }
  55. },
  56. uZIndex() {
  57. // 显示toast时候,如果用户有传递z-index值,有限使用
  58. return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999';
  59. }
  60. },
  61. methods: {
  62. // 显示toast组件,由父组件通过this.$refs.xxx.show(options)形式调用
  63. show(options) {
  64. // 不降结果合并到this.config变量,避免多次条用u-toast,前后的配置造成混论
  65. this.tmpConfig = this.$u.deepMerge(this.config, options);
  66. if (this.timer) {
  67. // 清除定时器
  68. clearTimeout(this.timer);
  69. this.timer = null;
  70. }
  71. this.isShow = true;
  72. this.timer = setTimeout(() => {
  73. // 倒计时结束,清除定时器,隐藏toast组件
  74. this.isShow = false;
  75. clearTimeout(this.timer);
  76. this.timer = null;
  77. // 判断是否存在callback方法,如果存在就执行
  78. typeof(this.tmpConfig.callback) === 'function' && this.tmpConfig.callback();
  79. this.timeEnd();
  80. }, this.tmpConfig.duration);
  81. },
  82. // 隐藏toast组件,由父组件通过this.$refs.xxx.hide()形式调用
  83. hide() {
  84. this.isShow = false;
  85. if (this.timer) {
  86. // 清除定时器
  87. clearTimeout(this.timer);
  88. this.timer = null;
  89. }
  90. },
  91. // 倒计时结束之后,进行的一些操作
  92. timeEnd() {
  93. // 如果带有url值,根据isTab为true或者false进行跳转
  94. if (this.tmpConfig.url) {
  95. // 如果url没有"/"开头,添加上,因为uni的路由跳转需要"/"开头
  96. if (this.tmpConfig.url[0] != '/') this.tmpConfig.url = '/' + this.tmpConfig.url;
  97. // 判断是否有传递显式的参数
  98. if (Object.keys(this.tmpConfig.params).length) {
  99. // 判断用户传递的url中,是否带有参数
  100. // 使用正则匹配,主要依据是判断是否有"/","?","="等,如“/page/index/index?name=mary"
  101. // 如果有params参数,转换后无需带上"?"
  102. let query = '';
  103. if (/.*\/.*\?.*=.*/.test(this.tmpConfig.url)) {
  104. // object对象转为get类型的参数
  105. query = this.$u.queryParams(this.tmpConfig.params, false);
  106. this.tmpConfig.url = this.tmpConfig.url + "&" + query;
  107. } else {
  108. query = this.$u.queryParams(this.tmpConfig.params);
  109. this.tmpConfig.url += query;
  110. }
  111. }
  112. // 如果是跳转tab页面,就使用uni.switchTab
  113. if (this.tmpConfig.isTab) {
  114. uni.switchTab({
  115. url: this.tmpConfig.url
  116. });
  117. } else {
  118. uni.navigateTo({
  119. url: this.tmpConfig.url
  120. });
  121. }
  122. } else if(this.tmpConfig.back) {
  123. // 回退到上一页
  124. this.$u.route({
  125. type: 'back'
  126. })
  127. }
  128. }
  129. }
  130. };
  131. </script>
  132. <style lang="scss" scoped>
  133. @import "../../libs/css/style.components.scss";
  134. .u-toast {
  135. position: fixed;
  136. z-index: -1;
  137. transition: opacity 0.3s;
  138. text-align: center;
  139. color: #fff;
  140. border-radius: 8rpx;
  141. background: #585858;
  142. @include vue-flex;
  143. align-items: center;
  144. justify-content: center;
  145. font-size: 28rpx;
  146. opacity: 0;
  147. pointer-events: none;
  148. padding: 18rpx 40rpx;
  149. }
  150. .u-toast.u-show {
  151. opacity: 1;
  152. }
  153. .u-icon {
  154. margin-right: 10rpx;
  155. @include vue-flex;
  156. align-items: center;
  157. line-height: normal;
  158. }
  159. .u-position-center {
  160. left: 50%;
  161. top: 50%;
  162. transform: translate(-50%,-50%);
  163. /* #ifndef APP-NVUE */
  164. max-width: 70%;
  165. /* #endif */
  166. }
  167. .u-position-top {
  168. left: 50%;
  169. top: 20%;
  170. transform: translate(-50%,-50%);
  171. }
  172. .u-position-bottom {
  173. left: 50%;
  174. bottom: 20%;
  175. transform: translate(-50%,-50%);
  176. }
  177. .u-type-primary {
  178. color: $u-type-primary;
  179. background-color: $u-type-primary-light;
  180. border: 1px solid rgb(215, 234, 254);
  181. }
  182. .u-type-success {
  183. color: $u-type-success;
  184. background-color: $u-type-success-light;
  185. border: 1px solid #BEF5C8;
  186. }
  187. .u-type-error {
  188. color: $u-type-error;
  189. background-color: $u-type-error-light;
  190. border: 1px solid #fde2e2;
  191. }
  192. .u-type-warning {
  193. color: $u-type-warning;
  194. background-color: $u-type-warning-light;
  195. border: 1px solid #faecd8;
  196. }
  197. .u-type-info {
  198. color: $u-type-info;
  199. background-color: $u-type-info-light;
  200. border: 1px solid #ebeef5;
  201. }
  202. .u-type-default {
  203. color: #fff;
  204. background-color: #585858;
  205. }
  206. </style>