<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.18);
}
.dialog {
width: 400px;
height: 400px;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
/* 上边移动到自身的-一半.... */
}
</style>
</head>
<body>
<div id="app">
<button @click='flag=true'>弹出</button>
<!-- 模拟实现 <dialog :show='false' @close='fn'></dialog> -->
<!--结构<div class="mask">
<div class="dialog">
<button>关闭</button>
</div>
</div> -->
<model :show='flag' @close='()=>flag=false'></model>
</div>
<template id="dialog">
<div class="mask" v-show='show'>
<div class="dialog">
<button @click='shut'>关闭</button>
</div>
</div>
</template>
</body>
<script>
let model = {
props:['show'], //接收了父组件的属性
template: '#dialog',
methods:{
shut(){
this.$emit('close');
}
}
}
let vm = new Vue({
el: "#app",
data: {
flag:false
},
components: {
model //名字不能叫dialog，原生html中已经占用了这个名字
}
})
</script>
</html>vue组件实现模态框
猜你喜欢
转载自blog.csdn.net/liuhua_2323/article/details/83050236
今日推荐
周排行