利用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>