cmc-oa/oa-ui-app/uni_modules/uv-toast/components/uv-toast/uv-toast.vue

<template>
	<view class="uv-toast">
		<uv-overlay :show="isShow && tmpConfig.overlay" :custom-style="overlayStyle"></uv-overlay>
		<uv-transition :show="isShow" mode="fade" :custom-style="aniStyle">
			<view
				class="uv-toast__content"
				ref="uvToastContent"
				:style="[contentStyle]"
				:class="['uv-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ?  'uv-toast__content--loading' : '']"
			>
				<uv-loading-icon
					v-if="tmpConfig.type === 'loading'"
					mode="circle"
					color="rgb(255, 255, 255)"
					inactiveColor="rgb(120, 120, 120)"
					size="25"
				></uv-loading-icon>
				<uv-icon
					v-else-if="tmpConfig.type !== 'defalut' && iconName"
					:name="iconName"
					size="17"
					:color="tmpConfig.type"
					:customStyle="iconStyle"
				></uv-icon>
				<uv-gap
					v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
					height="12"
					bgColor="transparent"
				></uv-gap>
				<text
					class="uv-toast__content__text"
					:class="['uv-toast__content__text--' + tmpConfig.type]"
					style="max-width: 400rpx;"
				>{{ tmpConfig.message }}</text>
			</view>
		</uv-transition>
	</view>
</template>
<script>
	import { hexToRgb } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js'
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	// #ifdef APP-NVUE
	const dom = uni.requireNativePlugin('dom')
	// #endif
	/**
	 * toast 消息提示
	 * @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
	 * @tutorial https://www.uvui.cn/components/toast.html
	 * @property {Boolean}	loading		是否加载中 （默认 false ）
	 * @property {String | Number}	zIndex	toast展示时的zIndex值 (默认 10090 )
	 * @property {String | Number}	message		显示的文字内容
	 * @property {String} icon 图标，或者绝对路径的图片
	 * @property {String} type 主题类型 （默认 default）
	 * @property {Boolean} overlay 是否显示透明遮罩，防止点击穿透 （默认 false ）
	 * @property {String} position 位置 （默认 'center' ）
	 * @property {Object} params 跳转的参数 
	 * @property {String | Number}  duration	展示时间，单位ms （默认 2000 ）
	 * @property {Function} complete 执行完后的回调函数 
	 * 
	 * @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
	 * @example <uv-toast ref="uvToastRef" />
	 */
	export default {
		name: 'uv-toast',
		mixins: [mpMixin, mixin],
		data() {
			return {
				isShow: false,
				timer: null, // 定时器
				config: {
					message: '', // 显示文本
					type: '', // 主题类型，primary，success，error，warning，black
					duration: 2000, // 显示的时间，毫秒
					icon: true, // 显示的图标
					position: 'center', // toast出现的位置
					complete: null, // 执行完后的回调函数
					overlay: true, // 是否防止触摸穿透
					loading: false ,// 是否加载中状态
					zIndex: 10090 //弹出的层级
				},
				tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
				rect: {},
				opacity: 0
			}
		},
		computed: {
			iconName() {
				// 只有不为none，并且type为error|warning|succes|info时候，才显示图标
				if (!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
					return '';
				}
				if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
					return this.$uv.type2icon(this.tmpConfig.type)
				} else {
					return ''
				}
			},
			overlayStyle() {
				const style = {
					justifyContent: 'center',
					alignItems: 'center',
					display: 'flex',
					zIndex: this.tmpConfig.zIndex
				}
				// 将遮罩设置为100%透明度，避免出现灰色背景
				style.backgroundColor = 'rgba(0, 0, 0, 0)'
				return style
			},
			iconStyle() {
				const style = {}
				// 图标需要一个右边距，以跟右边的文字有隔开的距离
				style.marginRight = '4px'
				// #ifdef APP-NVUE
				// iOSAPP下，图标有1px的向下偏移，这里进行修正
				if (this.$uv.os() === 'ios') {
					style.marginTop = '-1px'
				}
				// #endif
				return style
			},
			aniStyle() {
				const style = {
					position: 'fixed',
					zIndex: this.tmpConfig.zIndex
				}
				return style
			},
			// 内容盒子的样式
			contentStyle() {
				const { windowWidth, windowHeight } = this.$uv.sys();
				const style = {
					position: 'fixed',
					top: '50%',
					left: '50%',
					// #ifdef APP-NVUE
					opacity: this.opacity
					// #endif
				};
				let value = 0
				// #ifndef APP-NVUE
				// 根据top和bottom，对Y轴进行窗体高度的百分比偏移
				if (this.tmpConfig.position === 'top') {
					style.top = '25%'
				} else if (this.tmpConfig.position === 'bottom') {
					style.top = '75%'
				} else {
					value = '-50%'
				}
				style.transform = `translate(-50%,${value})`
				// #endif
				// #ifdef APP-NVUE
				const { width = 0, height = 0 } = this.rect ? this.rect : {};
				if (width && height) {
					style.left = `${windowWidth*0.5 - width/2}px`
					if (this.tmpConfig.position === 'top') {
						style.top = `${windowHeight*0.5- height/2 - windowHeight*0.25}px`
					} else if (this.tmpConfig.position === 'bottom') {
						style.top = `${windowHeight*0.5- height/2 + windowHeight*0.25}px`
					} else {
						style.top = `${windowHeight*0.5- height/2}px`
					}
				}
				// #endif
				return style
			}
		},
		created() {
			// 通过主题的形式调用toast，批量生成方法函数
			['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => {
				this[item] = message => this.show({
					type: item,
					message
				})
			})
		},
		methods: {
			// 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用
			show(options) {
				// 不将结果合并到this.config变量，避免多次调用uv-toast，前后的配置造成混乱
				this.tmpConfig = this.$uv.deepMerge(this.config, options)
				// 清除定时器
				this.clearTimer()
				this.isShow = true
				//#ifdef APP-NVUE
				this.$nextTick(() => {
					this.$uv.sleep(100).then(async res => {
						this.rect = await this.queryRect();
						this.$nextTick(() => {
							this.opacity = 1;
						})
					})
				})
				// #endif
				this.timer = setTimeout(() => {
					// 倒计时结束，清除定时器，隐藏toast组件
					this.clearTimer()
					// 判断是否存在callback方法，如果存在就执行
					typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
				}, this.tmpConfig.duration)
			},
			// 查询内容高度
			queryRect() {
				return new Promise(resolve => {
					const ref = this.$refs['uvToastContent'];
					dom.getComponentRect(ref, res => {
						resolve(res.size)
					})
				})
			},
			// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
			hide() {
				this.clearTimer()
			},
			clearTimer() {
				// #ifdef APP-NVUE
				this.opacity = 0;
				// #endif
				this.isShow = false
				// 清除定时器
				clearTimeout(this.timer)
				this.timer = null
			}
		},
		// #ifdef VUE2
		beforeDestroy() {
			this.clearTimer()
		},
		// #endif
		// #ifdef VUE3
		unmounted() {
			this.clearTimer()
		}
		// #endif
	}
</script>
<style lang="scss" scoped>
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
	$uv-toast-color: #fff !default;
	$uv-toast-border-radius: 4px !default;
	$uv-toast-border-background-color: #585858 !default;
	$uv-toast-border-font-size: 14px !default;
	$uv-toast-border-padding: 12px 20px !default;
	$uv-toast-loading-border-padding: 20px 20px !default;
	$uv-toast-content-text-color: #fff !default;
	$uv-toast-content-text-font-size: 15px !default;
	$uv-toast-uv-icon: 10rpx !default;
	$uv-toast-uv-type-primary-color: $uv-primary !default;
	$uv-toast-uv-type-primary-background-color: #ecf5ff !default;
	$uv-toast-uv-type-primary-border-color: rgb(215, 234, 254) !default;
	$uv-toast-uv-type-primary-border-width: 1px !default;
	$uv-toast-uv-type-success-color: $uv-success !default;
	$uv-toast-uv-type-success-background-color: #dbf1e1 !default;
	$uv-toast-uv-type-success-border-color: #BEF5C8 !default;
	$uv-toast-uv-type-success-border-width: 1px !default;
	$uv-toast-uv-type-error-color: $uv-error !default;
	$uv-toast-uv-type-error-background-color: #fef0f0 !default;
	$uv-toast-uv-type-error-border-color: #fde2e2 !default;
	$uv-toast-uv-type-error-border-width: 1px !default;
	$uv-toast-uv-type-warning-color: $uv-warning !default;
	$uv-toast-uv-type-warning-background-color: #fdf6ec !default;
	$uv-toast-uv-type-warning-border-color: #faecd8 !default;
	$uv-toast-uv-type-warning-border-width: 1px !default;
	$uv-toast-uv-type-default-color: #fff !default;
	$uv-toast-uv-type-default-background-color: #585858 !default;
	.uv-toast {
		&__content {
			@include flex;
			padding: $uv-toast-border-padding;
			border-radius: $uv-toast-border-radius;
			background-color: $uv-toast-border-background-color;
			color: $uv-toast-color;
			align-items: center;
			/* #ifndef APP-NVUE */
			max-width: 600rpx;
			/* #endif */
			position: relative;
			&--loading {
				flex-direction: column;
				padding: $uv-toast-loading-border-padding;
			}
			&__text {
				color: $uv-toast-content-text-color;
				font-size: $uv-toast-content-text-font-size;
				line-height: $uv-toast-content-text-font-size;
				&--default {
					color: $uv-toast-content-text-color;
				}
				&--error {
					color: $uv-error;
				}
				&--primary {
					color: $uv-primary;
				}
				&--success {
					color: $uv-success;
				}
				&--warning {
					color: $uv-warning;
				}
			}
		}
	}
	.uv-type-primary {
		color: $uv-toast-uv-type-primary-color;
		background-color: $uv-toast-uv-type-primary-background-color;
		border-color: $uv-toast-uv-type-primary-border-color;
		border-width: $uv-toast-uv-type-primary-border-width;
	}
	.uv-type-success {
		color: $uv-toast-uv-type-success-color;
		background-color: $uv-toast-uv-type-success-background-color;
		border-color: $uv-toast-uv-type-success-border-color;
		border-width: 1px;
	}
	.uv-type-error {
		color: $uv-toast-uv-type-error-color;
		background-color: $uv-toast-uv-type-error-background-color;
		border-color: $uv-toast-uv-type-error-border-color;
		border-width: $uv-toast-uv-type-error-border-width;
	}
	.uv-type-warning {
		color: $uv-toast-uv-type-warning-color;
		background-color: $uv-toast-uv-type-warning-background-color;
		border-color: $uv-toast-uv-type-warning-border-color;
		border-width: 1px;
	}
	.uv-type-default {
		color: $uv-toast-uv-type-default-color;
		background-color: $uv-toast-uv-type-default-background-color;
	}
</style>