preface

In daily development. Some components imported by import may not meet our requirements, or some components may be used in a lot of places. Frequent import is also tedious. Components such as dialog, alert, etc., may be used throughout the project. It may be more convenient to register the component as global and make calls through JS.

Encapsulating dialog component

A component with confirm and cancel functions, the implementation code is as follows

//dialog.vue <template> <van-overlay :show="showOverlay" > <div class="content-box"> <span class="cont">{{content.message}}</span> <div class="bottom-btn"> <span class="cancel-btn" v-if="content.isShowCancelBtn" </span> <span class="sure "@click="sure">{{content.confirmbtnText}}</span> </div> </div> </van-overlay> </template> <script> export default { data(){ return { showOverlay:true, content:{ message: "", confirmBtnText: "", isShowCancelBtn: false } } }, methods:{ cancel(){}, sure(){} } } </script> <style lang="less" scoped> @import "~@/style/variables.less"; @import "~@/style/mixin.less"; .content-box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; Wh (6.1, 3.16); background: #FFFFFF; Border - the radius: 0.2 rem; .cont{ width: 100%; The font - size: 0.3 rem; font-family:@font-family; font-weight: 400; color: #333333; text-align: center; } .bottom-btn{ width: 100%; Margin - top: 0.6 rem; display: flex; justify-content: space-around; align-items: center; . Cancel - BTN {. Wh (2.52, 0.8); The line - height: 0.8 rem; Border - the radius: 0.45 rem; Border: 0.02 rem solid # CCCCCC; The font - size: 0.28 rem; font-family:@font-family; font-weight: 400; color: #999999; Text-align: center}. Sure-btn {.wh(2.52,0.8); text-align: center}. The line - height: 0.8 rem; background: #FF692A; Border - the radius: 0.45 rem; The font - size: 0.28 rem; font-family:@font-family; font-weight: 400; color: #fff; text-align: center; } } } </style>Copy the code
//dialog.js import Vue from 'vue'; import Overlay from './overlay.vue' let dialogConstructor = Vue.extend(Overlay); Let thsDialog = function (content) {return new Promise((res, rej) => { Cancel the execution rejectlet const dialogDom = new dialogConstructor () $mount () document. The body. The appendChild (dialogDom. $el); Dialogdom.content = content; // Create a new object and insert it into the body. dialogDom.sure = function () { res() dialogDom.showOverlay = false } dialogDom.cancel = function () { rej() dialogDom.showOverlay = false } }) } export default thsDialog;Copy the code

Call way

This can be done by importing it in the main.js file and using it globally. Individual components can also be introduced for use

# import dialog from '. / components/overlay overlay. Js' dialog ({message: 'confirm delete the business hours? ', confirmBtnText: 'confirmed', isShowCancelBtn: true}), then (() = > {this. CustomTimeList. Splice (index, 1)}). The catch (() = > {})Copy the code

conclusion

Some problems encountered in daily development were summarized. So that the next time you encounter a problem can be quickly located. If there is any improper place above, please correct it.