Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

223 рядки
5.8 KiB

  1. <template>
  2. <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + config.type, 'u-position-' + config.position]" :style="{
  3. zIndex: uZIndex
  4. }">
  5. <view class="u-icon-wrap">
  6. <u-icon v-if="config.icon" class="u-icon" :name="iconName" :size="30" :color="config.type"></u-icon>
  7. </view>
  8. <text class="u-text">{{config.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. };
  46. },
  47. computed: {
  48. iconName() {
  49. // 只有不为none,并且type为error|warning|succes|info时候,才显示图标
  50. if (['error', 'warning', 'success', 'info'].indexOf(this.config.type) >= 0 && this.config.icon) {
  51. let icon = this.$u.type2icon(this.config.type);
  52. return icon;
  53. }
  54. },
  55. uZIndex() {
  56. // 显示toast时候,如果用户有传递z-index值,有限使用
  57. return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999';
  58. }
  59. },
  60. methods: {
  61. // 显示toast组件,由父组件通过this.$refs.xxx.show(options)形式调用
  62. show(options) {
  63. this.config = this.$u.deepMerge(this.config, options);
  64. if (this.timer) {
  65. // 清除定时器
  66. clearTimeout(this.timer);
  67. this.timer = null;
  68. }
  69. this.isShow = true;
  70. this.timer = setTimeout(() => {
  71. // 倒计时结束,清除定时器,隐藏toast组件
  72. this.isShow = false;
  73. clearTimeout(this.timer);
  74. this.timer = null;
  75. // 判断是否存在callback方法,如果存在就执行
  76. typeof(this.config.callback) === 'function' && this.config.callback();
  77. this.timeEnd();
  78. }, this.config.duration);
  79. },
  80. // 隐藏toast组件,由父组件通过this.$refs.xxx.hide()形式调用
  81. hide() {
  82. this.isShow = false;
  83. if (this.timer) {
  84. // 清除定时器
  85. clearTimeout(this.timer);
  86. this.timer = null;
  87. }
  88. },
  89. // 倒计时结束之后,进行的一些操作
  90. timeEnd() {
  91. // 如果带有url值,根据isTab为true或者false进行跳转
  92. if (this.config.url) {
  93. // 如果url没有"/"开头,添加上,因为uni的路由跳转需要"/"开头
  94. if (this.config.url[0] != '/') this.config.url = '/' + this.config.url;
  95. // 判断是否有传递显式的参数
  96. if (Object.keys(this.config.params).length) {
  97. // 判断用户传递的url中,是否带有参数
  98. // 使用正则匹配,主要依据是判断是否有"/","?","="等,如“/page/index/index?name=mary"
  99. // 如果有params参数,转换后无需带上"?"
  100. let query = '';
  101. if (/.*\/.*\?.*=.*/.test(this.config.url)) {
  102. // object对象转为get类型的参数
  103. query = this.$u.queryParams(this.config.params, false);
  104. this.config.url = this.config.url + "&" + query;
  105. } else {
  106. query = this.$u.queryParams(this.config.params);
  107. this.config.url += query;
  108. }
  109. }
  110. // 如果是跳转tab页面,就使用uni.switchTab
  111. if (this.config.isTab) {
  112. uni.switchTab({
  113. url: this.config.url
  114. });
  115. } else {
  116. uni.navigateTo({
  117. url: this.config.url
  118. });
  119. }
  120. } else if(this.config.back) {
  121. // 回退到上一页
  122. this.$u.route({
  123. type: 'back'
  124. })
  125. }
  126. }
  127. }
  128. };
  129. </script>
  130. <style lang="scss" scoped>
  131. @import "../../libs/css/style.components.scss";
  132. .u-toast {
  133. position: fixed;
  134. z-index: -1;
  135. transition: opacity 0.3s;
  136. text-align: center;
  137. color: #fff;
  138. border-radius: 8rpx;
  139. background: #585858;
  140. height: 80rpx;
  141. display: flex;
  142. align-items: center;
  143. justify-content: center;
  144. font-size: 28rpx;
  145. opacity: 0;
  146. pointer-events: none;
  147. padding:0 40rpx;
  148. }
  149. .u-toast.u-show {
  150. opacity: 1;
  151. }
  152. .u-text {
  153. word-break: keep-all;
  154. white-space: nowrap;
  155. line-height: normal;
  156. }
  157. .u-icon {
  158. margin-right: 10rpx;
  159. display: flex;
  160. align-items: center;
  161. line-height: normal;
  162. }
  163. .u-position-center {
  164. left: 50%;
  165. top: 50%;
  166. transform: translateX(-50%) translateY(-50%);
  167. }
  168. .u-position-top {
  169. left: 50%;
  170. top: 20%;
  171. transform: translateX(-50%) translateY(-50%);
  172. }
  173. .u-position-bottom {
  174. left: 50%;
  175. bottom: 20%;
  176. transform: translateX(-50%) translateY(-50%);
  177. }
  178. .u-type-primary {
  179. color: $u-type-primary;
  180. background-color: $u-type-primary-light;
  181. border: 1px solid rgb(215, 234, 254);
  182. }
  183. .u-type-success {
  184. color: $u-type-success;
  185. background-color: $u-type-success-light;
  186. border: 1px solid #BEF5C8;
  187. }
  188. .u-type-error {
  189. color: $u-type-error;
  190. background-color: $u-type-error-light;
  191. border: 1px solid #fde2e2;
  192. }
  193. .u-type-warning {
  194. color: $u-type-warning;
  195. background-color: $u-type-warning-light;
  196. border: 1px solid #faecd8;
  197. }
  198. .u-type-info {
  199. color: $u-type-info;
  200. background-color: $u-type-info-light;
  201. border: 1px solid #ebeef5;
  202. }
  203. .u-type-default {
  204. color: #fff;
  205. background-color: #585858;
  206. }
  207. </style>