Vue2全局封装modal弹框

Vue2全局封装modal弹框使用：

一.components下封装

1.index.js

import ModalCheck from './modal-check.vue'
export default ModalCheck

2.modal-check.vue

<template>
  <div>
    <Modal
      v-model="selSingleShow"
      :title="editTitle+'('+convertCarrier(editType)+')'"
      :mask-closable="false"
      :width="960"
      footer-hide
      id="checkboxInSelModal"
      @on-visible-change="visibleChange"
    >
      <Icon
        slot="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" >
				<Checkbox
				  v-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.data
            if(data.type=='x'){
               //do
            }
            if(data.type=='y'){
               //do
            }
        
         }
    },