card-wx-user/components/thorui/tui-tips/tui-tips.vue

<template>
	<block v-if="position == 'top'">
		<view class="tui-tips-class tui-toptips" :style="{backgroundColor:backgroundColor,color:color,fontSize:size+'rpx'}" :class="[show ? 'tui-top-show' : '']">{{ msg }}</view>
	</block>
	<block v-else>
		<view class="tui-tips-class tui-toast" :class="[position == 'center' ? 'tui-centertips' : 'tui-bottomtips', show ? 'tui-toast-show' : '']">
			<view class="tui-tips-content" :style="{backgroundColor:backgroundColor,color:color,fontSize:size+'rpx'}">{{ msg }}</view>
		</view>
	</block>
</template>

<script>
export default {
	name: 'tuiTips',
	props: {
		//top bottom center
		position: {
			type: String,
			default: 'top'
		},
		backgroundColor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.7)'
		},
		color: {
			type: String,
			default: '#fff'
		},
		size: {
			type: Number,
			default: 30
		}
	},
	data() {
		return {
			timer: null,
			show: false,
			msg: '无法连接到服务器~'
		};
	},
	methods: {
		showTips: function(options) {
			const {duration = 2000 } = options;
			clearTimeout(this.timer);
			this.show = true;
			// this.duration = duration < 2000 ? 2000 : duration;
			this.msg = options.msg;
			this.timer = setTimeout(() => {
				this.show = false;
				clearTimeout(this.timer);
				this.timer = null;
			}, duration);
		}
	}
};
</script>

<style scoped>
/*顶部消息提醒 start*/
.tui-toptips {
	width: 100%;
	padding: 18rpx 30rpx;
	box-sizing: border-box;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: break-all;
	opacity: 0;
	transform: translateZ(0) translateY(-100%);
	transition: all 0.3s ease-in-out;
}

.tui-top-show {
	transform: translateZ(0) translateY(0);
	opacity: 1;
}

/*顶部消息提醒 end*/

/*toast消息提醒 start*/

/*注意问题：
 1、fixed 元素宽度无法自适应，所以增加了子元素
 2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
*/
.tui-toast {
	width: 80%;
	box-sizing: border-box;
	color: #fff;
	font-size: 28rpx;
	position: fixed;
	visibility: hidden;
	opacity: 0;
	left: 50%;
	transition: all 0.3s ease-in-out;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-toast-show {
	visibility: visible;
	opacity: 1;
}

.tui-tips-content {
	word-wrap: break-word;
	word-break: break-all;
	border-radius: 8rpx;
	padding: 18rpx 30rpx;
}

.tui-bottomtips {
	bottom: 120rpx;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tui-centertips {
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
</style>