<style>
.demo button{
	margin:10px 0;
}
</style>
<template>
<div class="demo">
	<button type="button" class="btn-outline btn-block" @click="onShow1">默认</button>
	<button type="button" class="btn-outline btn-block" @click="onShow4">自动隐藏</button>
	<button type="button" class="btn-outline btn-block" @click="onShow5">动画</button>
	<toast
	:visible.sync="visible1"
	:text="text"
	@click="hide"
	></toast>


	<toast
	:visible.sync="visible4"
	:text="text"
	:auto-play="autoPlay"
	:delay="delay"	
	></toast>

	<toast
	:visible.sync="visible5"
	:text="text"
	transition="toast-fade-up"
	@click="hide"
	></toast>
</div>
</template>

<script>
import Toast from "components/toast/"

export default{
	data(){
		return{
			visible1:false,
			visible2:false,
			visible3:false,
			visible4:false,
			visible5:false,
			autoPlay:true,
			delay:1000,
			text:"网络连接超时，请稍后重试"
		}
 	},
 	components:{
 		Toast
 	},
 	methods:{
 		hide(){
 			this.visible1=false;
 			this.visible2=false;
 			this.visible3=false;
 			this.visible5=false;
 		},
 		onShow1(){
 			this.visible1=true;
 		},
 		onShow2(){
 			this.visible2=true;
 		},
 		onShow3(){
 			this.visible3=true;
 		},
 		onShow5(){
 			this.visible5=true;
 		},
 		onShow4(){
 			this.visible4=true;
 		}
 	}
}
</script>