基于Vue的弹框实例
看到博客的人，请养成写博客的习惯，不会不会，就怕曾经会过，现在想不起来了，一起加油.................... 让学习真的成为一种习惯，同时要注意身体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue.min.js"></script>
<title>Slot content extend Demo</title>
<style type="text/css">
.mask{
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
position: fixed;
left:0;
top:0;
}
.mask .content{
position: fixed;
width: 400px;
height: 400px;
background: #fff;
color:#fff;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">弹</button>
<hr>
<jspang :show="show" @closeparent="cl"></jspang>
</div>
<template id="dialog">
<div v-if="show" class="mask">
<h1>标题的内容</h1>
<div class="content">
<button @click="close">x</button>
<span style="color:ccc">xxxxx&creat;</span>
</div>
</div>
</template>
<script type="text/javascript">
// dialog组件
var jspang = {
props:["show"],
template:`#dialog`,
methods:{
close(){
this.$emit("closeparent");
}
}
}
var app=new Vue({
el:'#app',
data:{
show:false
},
components:{
jspang
},
methods:{
cl(){
this.show = false;
}
}
})
</script>
</body>
</html>
