vue 通用的toast弹窗 toast 弹窗提示

水深无声 2021-07-25 00:45 593阅读 0赞

![20190829171055833.gif][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>弹窗</title>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    		<style type="text/css">
    			.toast {
    				padding: 10px 25px 10px 25px;
    				background: rgba(0, 0, 0, .5);
    				border-radius: 5px;
    				color: #ffffff;
    				text-align: center;
    				position: fixed;
    				left: 50%;
    				top: 40%;
    				transform: translate(-50%, -50%);
    				z-index: 100;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test">
    			<toast v-if='isShow' :message='isShowMsg'></toast>
    			<div class="container" @click="showToast">
    				点击显示 showToast
    			</div>
    		</div>
    		<script>
    			var that;
    			Vue.component('toast', {
    				props: ['message'],
    				template: `
    			    <div class="toast_bg_transparent">
    			        <div class="toast">
    			            <span>{
       {message}}</span>
    			        </div>
    			    </div>
    			    `
    			})
    			new Vue({
    				el: '#test',
    				data() {
    					return {
    						isShow: false,
    						isShowMsg: '', //弹窗提示
    					}
    				},
    				methods: {
    
    					showToast() {
    						console.log('点击了 showToast')
    						this.isShow = true;
    						this.isShowMsg = '错误提示';
    
    						setTimeout(() => {
    							this.isShow = false;
    						}, 1000);
    					}
    				},
    				mounted() {}
    			})
    		</script>
    	</body>
    </html>

[20190829171055833.gif]: /images/20210724/ad44de1c4b1e4e0fad62c1f00fe524c7.png