<template> <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]" :style="{ zIndex: uZIndex }"> <view class="u-icon-wrap"> <u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon> </view> <text class="u-text">{{tmpConfig.title}}</text> </view> </template> <script> /** * toast 消息提示 * @description 此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方。 * @tutorial https://www.uviewui.com/components/toast.html * @property {String} z-index toast展示时的z-index值 * @event {Function} show 显示toast,如需一进入页面就显示toast,请在onReady生命周期调用 * @example <u-toast ref="uToast" /> */ export default { name: "u-toast", props: { // z-index值 zIndex: { type: [Number, String], default: '' }, }, data() { return { isShow: false, timer: null, // 定时器 config: { params: {}, // URL跳转的参数,对象 title: '', // 显示文本 type: '', // 主题类型,primary,success,error,warning,black duration: 2000, // 显示的时间,毫秒 isTab: false, // 是否跳转tab页面 url: '', // toast消失后是否跳转页面,有则跳转,优先级高于back参数 icon: true, // 显示的图标 position: 'center', // toast出现的位置 callback: null, // 执行完后的回调函数 back: false, // 结束toast是否自动返回上一页 }, tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量 }; }, computed: { iconName() { // 只有不为none,并且type为error|warning|succes|info时候,才显示图标 if (['error', 'warning', 'success', 'info'].indexOf(this.tmpConfig.type) >= 0 && this.tmpConfig.icon) { let icon = this.$u.type2icon(this.tmpConfig.type); return icon; } }, uZIndex() { // 显示toast时候,如果用户有传递z-index值,有限使用 return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999'; } }, methods: { // 显示toast组件,由父组件通过this.$refs.xxx.show(options)形式调用 show(options) { // 不降结果合并到this.config变量,避免多次条用u-toast,前后的配置造成混论 this.tmpConfig = this.$u.deepMerge(this.config, options); if (this.timer) { // 清除定时器 clearTimeout(this.timer); this.timer = null; } this.isShow = true; this.timer = setTimeout(() => { // 倒计时结束,清除定时器,隐藏toast组件 this.isShow = false; clearTimeout(this.timer); this.timer = null; // 判断是否存在callback方法,如果存在就执行 typeof(this.tmpConfig.callback) === 'function' && this.tmpConfig.callback(); this.timeEnd(); }, this.tmpConfig.duration); }, // 隐藏toast组件,由父组件通过this.$refs.xxx.hide()形式调用 hide() { this.isShow = false; if (this.timer) { // 清除定时器 clearTimeout(this.timer); this.timer = null; } }, // 倒计时结束之后,进行的一些操作 timeEnd() { // 如果带有url值,根据isTab为true或者false进行跳转 if (this.tmpConfig.url) { // 如果url没有"/"开头,添加上,因为uni的路由跳转需要"/"开头 if (this.tmpConfig.url[0] != '/') this.tmpConfig.url = '/' + this.tmpConfig.url; // 判断是否有传递显式的参数 if (Object.keys(this.tmpConfig.params).length) { // 判断用户传递的url中,是否带有参数 // 使用正则匹配,主要依据是判断是否有"/","?","="等,如“/page/index/index?name=mary" // 如果有params参数,转换后无需带上"?" let query = ''; if (/.*\/.*\?.*=.*/.test(this.tmpConfig.url)) { // object对象转为get类型的参数 query = this.$u.queryParams(this.tmpConfig.params, false); this.tmpConfig.url = this.tmpConfig.url + "&" + query; } else { query = this.$u.queryParams(this.tmpConfig.params); this.tmpConfig.url += query; } } // 如果是跳转tab页面,就使用uni.switchTab if (this.tmpConfig.isTab) { uni.switchTab({ url: this.tmpConfig.url }); } else { uni.navigateTo({ url: this.tmpConfig.url }); } } else if(this.tmpConfig.back) { // 回退到上一页 this.$u.route({ type: 'back' }) } } } }; </script> <style lang="scss" scoped> @import "../../libs/css/style.components.scss"; .u-toast { position: fixed; z-index: -1; transition: opacity 0.3s; text-align: center; color: #fff; border-radius: 8rpx; background: #585858; @include vue-flex; align-items: center; justify-content: center; font-size: 28rpx; opacity: 0; pointer-events: none; padding: 18rpx 40rpx; } .u-toast.u-show { opacity: 1; } .u-icon { margin-right: 10rpx; @include vue-flex; align-items: center; line-height: normal; } .u-position-center { left: 50%; top: 50%; transform: translate(-50%,-50%); /* #ifndef APP-NVUE */ max-width: 70%; /* #endif */ } .u-position-top { left: 50%; top: 20%; transform: translate(-50%,-50%); } .u-position-bottom { left: 50%; bottom: 20%; transform: translate(-50%,-50%); } .u-type-primary { color: $u-type-primary; background-color: $u-type-primary-light; border: 1px solid rgb(215, 234, 254); } .u-type-success { color: $u-type-success; background-color: $u-type-success-light; border: 1px solid #BEF5C8; } .u-type-error { color: $u-type-error; background-color: $u-type-error-light; border: 1px solid #fde2e2; } .u-type-warning { color: $u-type-warning; background-color: $u-type-warning-light; border: 1px solid #faecd8; } .u-type-info { color: $u-type-info; background-color: $u-type-info-light; border: 1px solid #ebeef5; } .u-type-default { color: #fff; background-color: #585858; } </style>