├── README.md
└── dialog
    ├── dialog.vue
    └── main.vue


/README.md:
--------------------------------------------------------------------------------
1 | 具体参考博客： https://blog.csdn.net/qq_33599109/article/details/79883766
2 | 


--------------------------------------------------------------------------------
/dialog/dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="dialog" v-show="showMask">
  3 |         <div class="dialog-container">
  4 |             <div class="dialog-title">{{title}}</div>
  5 |             <div class="content" v-html="content"></div>
  6 |             <div class="btns">
  7 |                 <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
  8 |                     {{cancelText}}
  9 |                 </div>
 10 |                 <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
 11 |                     {{dangerText}}
 12 |                 </div>
 13 |                 <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
 14 |                     {{confirmText}}
 15 |                 </div>
 16 |             </div>
 17 |             <div class="close-btn" @click="closeMask"><i class="iconfont icon-close"></i></div>
 18 |         </div>
 19 |         
 20 |     </div>
 21 | </template>
 22 | <script>
 23 | export default {
 24 |     props: {
 25 |         value: {},
 26 |         // 类型包括 defalut 默认， danger 危险， confirm 确认，
 27 |         type:{
 28 |             type: String,
 29 |             default: 'default'
 30 |         },
 31 |         content: {
 32 |             type: String,
 33 |             default: ''
 34 |         },
 35 |         title: {
 36 |             type: String,
 37 |             default: ''
 38 |         },
 39 |         cancelText: {
 40 |             type: String,
 41 |             default: '取消'
 42 |         },
 43 |         dangerText: {
 44 |             type: String,
 45 |             default: '删除'
 46 |         },
 47 |         confirmText: {
 48 |             type: String,
 49 |             default: '确认'
 50 |         },
 51 |     },
 52 |     data(){
 53 |         return{
 54 |             showMask: false,
 55 |         }
 56 |     },
 57 |     methods:{
 58 |         closeMask(){
 59 |             this.showMask = false;
 60 |         },
 61 |         closeBtn(){
 62 |             this.$emit('cancel');
 63 |             this.closeMask();
 64 |         },
 65 |         dangerBtn(){
 66 |             this.$emit('danger');
 67 |             this.closeMask();
 68 |         },
 69 |         confirmBtn(){
 70 |             this.$emit('confirm');
 71 |             this.closeMask();
 72 |         }
 73 |     },
 74 |     mounted(){
 75 |         this.showMask = this.value;
 76 |     },
 77 |     watch:{
 78 |         value(newVal, oldVal){
 79 |             this.showMask = newVal;
 80 |         },
 81 |         showMask(val) {
 82 |             this.$emit('input', val);
 83 |         }
 84 |     },
 85 | }
 86 | </script>
 87 | <style lang="less" scoped>
 88 |     .dialog{
 89 |         position: fixed;
 90 |         top: 0;
 91 |         bottom: 0;
 92 |         left: 0;
 93 |         right: 0;
 94 |         background: rgba(0, 0, 0, 0.6);
 95 |         z-index: 9999;
 96 |         .dialog-container{
 97 |             width: 500px;
 98 |             height: 380px;
 99 |             background: #ffffff;
100 |             position: absolute;
101 |             top: 50%;
102 |             left: 50%;
103 |             transform: translate(-50%, -50%);
104 |             border-radius: 8px;
105 |             position: relative;
106 |             .dialog-title{
107 |                 width: 100%;
108 |                 height: 60px;
109 |                 font-size: 18px;
110 |                 color: #696969;
111 |                 font-weight: 600;
112 |                 padding: 16px 50px 0 20px;
113 |                 box-sizing: border-box;
114 |             }
115 |             .content{
116 |                 color: #797979;
117 |                 line-height: 26px;
118 |                 padding: 0 20px;
119 |                 box-sizing: border-box;
120 |             }
121 |             .inp{
122 |                 margin: 10px 0 0 20px;
123 |                 width: 200px;
124 |                 height: 40px;
125 |                 padding-left: 4px;
126 |                 border-radius: 4px;
127 |                 border: none;
128 |                 background: #efefef;
129 |                 outline: none;
130 |                 &:focus{
131 |                     border: 1px solid #509EE3;
132 |                 }
133 |             }
134 |             .btns{
135 |                 width: 100%;
136 |                 height: 60px;
137 |                 // line-height: 60px;
138 |                 position: absolute;
139 |                 bottom: 0;
140 |                 left: 0;
141 |                 text-align: right;
142 |                 padding: 0 16px;
143 |                 box-sizing: border-box;
144 |                 & > div{
145 |                     display: inline-block;
146 |                     height: 40px;
147 |                     line-height: 40px;
148 |                     padding: 0 14px;
149 |                     color: #ffffff;
150 |                     background: #f1f1f1;
151 |                     border-radius: 8px;
152 |                     margin-right: 12px;
153 |                     cursor: pointer;
154 |                 }
155 |                 .default-btn{
156 |                     color: #787878;
157 |                     &:hover{
158 |                         color: #509EE3; 
159 |                     }
160 |                 }
161 |                 .danger-btn{
162 |                     background: #EF8C8C;
163 |                     &:hover{
164 |                         background: rgb(224, 135, 135);
165 |                     }
166 |                     &:active{
167 |                         background: #EF8C8C;
168 |                     }
169 |                 }
170 |                 .confirm-btn{
171 |                     color: #ffffff;
172 |                     background: #509EE3;
173 |                     &:hover{
174 |                         background: #6FB0EB;
175 |                     }
176 |                 }
177 |             }
178 |             .close-btn{
179 |                 position: absolute;
180 |                 top: 16px;
181 |                 right: 16px;
182 |                 width: 30px;
183 |                 height: 30px;
184 |                 line-height: 30px;
185 |                 text-align: center;
186 |                 font-size: 18px;
187 |                 cursor: pointer;
188 |                 &:hover{
189 |                     font-weight: 600;
190 |                 }
191 |             }
192 |         }
193 |     }
194 | </style>
195 | 


--------------------------------------------------------------------------------
/dialog/main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="main">
 3 |         <div @click="openMask">打开弹窗</div>
 4 |         <dialog-bar v-model="sendVal" type="danger" title="我是标题" content="我是内容" v-on:cancel="clickCancel()" @danger="clickDanger()" @confirm="clickConfirm()" dangerText="Delete"></dialog-bar>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 | import dialogBar from './dialog.vue'
 9 | export default {
10 |    components:{
11 |         'dialog-bar': dialogBar,
12 |     },
13 |     data(){
14 |         return{
15 |             sendVal: false,
16 |         }
17 |     },
18 |     methods:{
19 |         openMask(index){
20 |             this.sendVal = true;
21 |         },
22 |         clickCancel(){
23 |             console.log('点击了取消');
24 |         },
25 |         clickDanger(){
26 |             console.log('这里是danger回调')
27 |         },
28 |         clickConfirm(){
29 |             console.log('点击了confirm');
30 |         }
31 |     }
32 | }
33 | </script>
34 | <style lang="less" scoped>
35 | 
36 | </style>
37 | 
38 | 


--------------------------------------------------------------------------------