Vue-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: @width;
 59         height: @height;
 60         border-radius: 4%;
 61     }
 62     .hr1{
 63         position: relative;
 64         width: 100%;
 65         border:1px solid #cccccc;
 66     }
 67     .mainContent{
 68         width: 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         width: 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>

 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                 width:‘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>