自定义 showToast 组件,可直接使用，附源代码和使用说明

比眉伴天荒 2022-10-17 04:24 254阅读 0赞

在我们使用 uniapp开发或者各种小程序开发时，经常会使用到 showToast 组件，但是它有很多限制，比如细节的样式和个性化需求无法满足，为了方便在 showToast 的基础上能做些个性化的需求，我自己封装了一个 showToast 组件，下面看代码吧~

以 uniapp 为例：

在项目的 components 目录，创建一个vue 文件（myShowToast.vue），代码：

<template>
    	<view>
    		<view v-if="show" class="myShowToast">
    			<view class="txt" v-if="title">{
        {title}}
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		name: "live-video",
    		props: ['title','time'],
    		data() {
    			return {
    				show: false
    			};
    		},
    		watch: {
    			title(){
    				if (this.title) {
    					this.show = true;
    					setTimeout(() => {
    						this.show = false;
    						this.$emit('hideToast','')
    					}, this.time||1500)
    				}
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.myShowToast {
    		width: 100vw;
    		height: 100vh;
    		position: fixed;
    		z-index: 9999;
    		justify-content: center;
    		align-items: center;
    		display: -webkit-flex;
    
    		.txt {
    			background-color: rgba(0, 0, 0, 0.7);
    			color: #fff;
    			padding: 20rpx 30rpx 20rpx 40rpx;
    			font-size: 28rpx;
    			border-radius: 10rpx;
    			max-width: 70vw;
    			word-break: break-all;
    		}
    	}
    </style>

使用方法：

1. 在main.js 中，引用该组件并设置为全局组件

import MyShowToast from "@/components/myShowToast.vue";
    Vue.component('MyShowToast',MyShowToast)

这样我们就可以在任意页面使用这个组件啦，下面看看在页面中使用的示例：

<template>
    	<view class="">
    		<button class="" @click="MyShowToastTitle='出现吧，皮卡丘~'">
    			点击出现弹窗
    		</button>
    		<MyShowToast :time="MyShowToastTime" :title="MyShowToastTitle" @hideToast="MyShowToastTitle=''"></MyShowToast>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				MyShowToastTitle:'',
    				MyShowToastTime:1500,
    			};
    		},
    		onLoad() {
    			console.log('aaaaaaaaaaaa')
    		}
    	}
    </script>
    
    <style>
    </style>

查看效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221014/2360d90ddec44b74943a718d9a8a2127.png