uniapp 实现Toast轻提示！

Rlm*2024-09-17 1:37

一、在components 文件夹下新建Toast 文件，包含Toast.vue 和index.js

Toast.vue

复制代码

<template>
	<view class="context" v-show="isshow">
		<text class="tip">{{ text }}</text>
	</view>
</template>
<script>
	export default {
		name: "Toast",
		props: {
			isshow: {
				type: Boolean,
			},
			text: {
				type: String,
			},
		},
		watch: {
			isshow(val) {
				if (val === true) {
					setTimeout(() => {
						this.isshow = false;
					}, 2000);
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.context {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;

		.tip {
			background-color: rgba(40, 40, 40, 0.8);
			color: aliceblue;
			font-size: 0.6rem;
			padding: 20rpx 10rpx;
			border-radius: 10rpx;
			text-align: center;
			max-width: 60%;
		}
	}
</style>

index.js

复制代码

import Toast from "./Toast.vue";
let NewToast = {
	install: function(Vue) {
		//创建vue插件，官方地址https://cn.vuejs.org/v2/guide/plugins.html
		let newToast = Vue.extend(Toast); //创建vue构造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extend
		let toast = new newToast(); //创建实例
		document.body.appendChild(toast.$mount().$el); //挂载
		Vue.prototype.$Toast = function(text) {
			toast.isshow = true; // 传入props
			toast.text = text; // 传入props
		};
	},
};
export {
	NewToast
};

二、在入口文件main.js文件中引入

复制代码

import {
	NewToast
} from "@/components/Toast/index.js";

Vue.use(NewToast);

三、在页面中使用

复制代码

this.$Toast("this is toast!");