Vue2全局封装modal弹框使用：
一.components下封装
1.index.js
import ModalCheck from './modal-check.vue'
export default ModalCheck
2.modal-check.vue
<template><div><Modalv-model="selSingleShow":title="editTitle+'('+convertCarrier(editType)+')'":mask-closable="false":width="960"footer-hideid="checkboxInSelModal"@on-visible-change="visibleChange"><Iconslot="close"custom="iconfont icon-Shape"size="20"class="modal-close"/><Row type="flex" justify="center"><div class="config-item marginTop-10"><CheckboxGroup v-model="selectNameArray" style="padding:18px 20px" ><Checkboxv-for="(item, index) in allNameList":key="'blackName-' + index":label="`${item.id}`"><span v-else>{{ item.groupName }}</span></Checkbox></CheckboxGroup></div></Row><Row><div class="modal-action"><Button type="primary" @click="sureAdd()">确定</Button><Button type="primary"@click="cancleAdd()">取消</Button></div></Row></Modal></div>
</template>
<script>
import Common from "@/components/common.vue";
export default {mixins: [Common],props: {selSingle: {type: Boolean,default: false,},editTitle: {type: String,default: "",},editType: {type: String,default: "",},selectBlackNameList: {type: Array,default: function () {return [];},},selectNameList: {type: Array,default: function () {return [];},},allNameList: {type: Array,default: function () {return [];},},},watch: {updatePage: function () {this.initData();},},data() {return {selectNameArray:[],containList:[],selSingleShow:false,};},methods: {sureAdd(){this.selSingleShow=false;this.updateNameChange(this.selectNameArray);this.updateSingle();},cancleAdd(){this.selSingleShow=false;this.updateSingle();},updateSingle() {this.$emit("updateSingle",this.selSingleShow);},updateNameChange(data) {this.$emit("sureAddName",{data:this.selectNameArray,type:this.$props.editType,editTitle:this.$props.editTitle});},visibleChange(state) {if (!state) {this.updateSingle();}},},created() {if(this.$props!=undefined){this.selSingleShow=this.$props.selSingle;this.selectNameArray=this.$props.selectNameList;}},
};
</script><style scoped></style>
二.页面引入使用
1.引入
import ModalCheck from "_c/modal-check";
export default {components: {ModalCheck,},data() { selSingleShow:false,editTitle:"",editType:"",addNameList: [],allNameList: [],}},
2.使用
<modal-check :selSingle="selSingleShow":editTitle="editTitle":editType="editType":selectNameList="addNameList":allNameList="allNameList"@sureAddName="updateNameList"@updateSingle="updateSingShow"></modal-check>
3.关闭弹框
updateSingShow(){this.selSingleShow=false;},
4.更新数据
updateNameList(data){if(data.editTitle=='XX'){let arr=data.dataif(data.type=='x'){//do}if(data.type=='y'){//do}}},
