新建一个Dialog组件
1 <template>
2 <div class="main">
3 <div :class="{dialog:propsItem.rgba}" v-if="propsItem.isMask">
4 <div class="content" v-bind:style="propsItem.widthHeight">
5 <span class="close big" @click="close">X</span>
6 <h1 class="title">{{propsItem.title}}</h1>
7 <hr class="hr1">
8 <div class="mainContent">
9 {{propsItem.contents}}
10 <slot></slot>
11 </div>
12 <hr class="hr1">
13 <input type="button" class="ok" :value="propsItem.ok" @click="okCallback">
14 <input type="button" class="cancel" :value="propsItem.cancel" @click="cancelCallback">
15 </div>
16 </div>
17 </div>
18 </template>
19
20 <script>
21 export default {
22 name:'dialog1',
23 props:{
24 // 接受父组件传的值
25 propsItem:{
26 type:Object
27 }
28 },
29 data(){
30 return {
31
32 }
33 },
34 methods:{
35 close(){
36 this.propsItem.isMask = false
37 },
38 okCallback(){
39 this.$emit('child-ok')
40 this.propsItem.isMask = false
41 },
42 cancelCallback(){
43 this.$emit('child-cancel')
44 this.propsItem.isMask = false
45 }
46 }
47 }
48 </script>
49
50 <style lang="less" scoped>
51 @position:absolute;
52 .alignCtener(@width,@height,@bgcolor){
53 position:@position;
54 top:50%;
55 left:50%;
56 transform:translate(-50%,-50%);
57 background-color: @bgcolor;
58 @width;
59 height: @height;
60 border-radius: 4%;
61 }
62 .hr1{
63 position: relative;
64 100%;
65 border:1px solid #cccccc;
66 }
67 .mainContent{
68 100%;
69 height: 65%;
70 overflow-y: scroll;
71 margin-bottom: 5%;
72 }
73 .dialog{
74 background-color: rgba(0,0,0,0.8);
75 position:absolute;
76 top: 0;
77 left:0;
78 100%;
79 height: 100%;
80 }
81 .close.big {
82 -webkit-transform: scale(2);
83 -moz-transform: scale(2);
84 -ms-transform: scale(2);
85 -o-transform: scale(2);
86 transform: scale(2);
87 }
88 .close{
89 position: absolute;
90 display: inline-block;
91 overflow: hidden;
92 right: 20px;
93 top:20px;
94 color:#000;
95 }
96 .content{
97 .alignCtener(500px,500px,#fff);
98 padding: 30px;
99 z-index: 999;
100 text-align: left;
101 box-shadow:5px 5px 13px #ccc;
102 }
103 .cancel,.ok{
104 position: absolute;
105 bottom: 10px;
106 right: 10px;
107 }
108 .ok{
109 right:100px;
110 }
111 </style>
再建一个d1组件
1 <template>
2 <div>
3 <h1 class="title">标题</h1>
4 <p>内容</p>
5 <input type="button" value="确认框" @click="clickBtn">
6 <Dialog v-if="isMask" :propsItem="propsItem" @child-ok="childok" @child-cancel="childcancel"></Dialog>
7 </div>
8 </template>
9
10 <script>
11 import Dialog from './Dialog'
12 export default {
13 name:"d1demo",
14 data(){
15 return {
16 isMask:false,
17 propsItem:{
18 title:'标题',
19 contents:'ccccc',
20 ok:'确认',
21 cancel:'取消',
22 isMask:true,
23 rgba:false,
24 widthHeight:{
25 '300px',
26 height:'300px'
27 }
28 }
29 }
30 },
31 components:{
32 Dialog
33 },
34 methods:{
35 clickBtn(){
36 this.propsItem.isMask = this.isMask = true
37 },
38 childok(){
39 alert('xxx')
40 },
41 childcancel(){
42 }
43 }
44 }
45 </script>
46
47 <style lang="less" scoped>
48
49 </style>
在使用的组件中调用
<template>
<div>
<input type="button" value="dialog" @click="clickBtn">
<Dialog v-if="isMask" v-bind:propsItem="propsItem" @child-
ok="childok" @child-cancel="childcancel">
<template>
<D1></D1>
</template>
</Dialog>
</div>
</template>
<script>
import Dialog from './components/Dialog'
import D1 from './components/d1'
export default {
name: "App",
components: {
Dialog,
D1
},
data() {
return {
isMask:false,
propsItem:{
title:'我是dialog标题',
contents:'我是dialog内容',
ok:'我是确认按钮',
cancel:'我是取消按钮',
isMask:true,
rgba:true
}
};
},
methods:{
clickBtn(){
this.propsItem.isMask = this.isMask = true
},
childok(){
alert('xxx')
},
childcancel(){
}
}
};
</script>
<style lang="less">
</style>
最终效果如下，d1组件是弹框中的弹框，不需要可以不用写
