Vue.js 实现 Toast 组件-优快云博客

本文介绍如何使用 Vue.js 创建一个 Toast 组件，该组件能够显示一条消息并在指定时间后自动消失。通过实例化组件并设置其可见性和持续时间来实现这一功能。

利用vue组件实现一个toast的显示，然后消失

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../7-16/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.toast{
				position: fixed;
				left: 50%;
				top: 50%;
				width: 200px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				color: #FFFFFF;
				background: #000;
				opacity: .6;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<button @click="tap()">登录</button>
		</div>
	</body>
	<script type="text/javascript">
		//创建组件，注册一个组件-----------组件的本质是JS对象，功能性组件
		var toast = Vue.component("toast",{
			template:"<div v-if='isshow' class='toast'>{{title}}</div>",
			data:function(){
				return{
					title:"登录成功",
					isshow:true,
					duration:2000
				}
			}
		});
		//封装函数，功能是调用组件
		var Toast = function(){
			//实例化组件-----组件对象实例化
			var toastVue = new toast({
				//el加载当前节点，没有就创建一个
				el:document.createElement("div")
			});
			document.body.appendChild(toastVue.$el);
			//自动消失
			setTimeout(function(){
				toastVue.isshow=false
			},toastVue.duration)
		};
		
		var vm = new Vue({
			el:"#out",
			methods:{
				tap(){
					Toast()
				}
			}
		})
	</script>
</html>