基于 ElementUi 二次封装可复用的弹窗组件

子组件：

<template>

  <div class="base-dialog">

      <el-dialog

        :title="title"

        :visible.sync="visible"

        :width="width"

        :append-to-body="appendToBody"

      >

          <slot></slot>

          <div slot="footer" v-if="isShowFooter">

              <el-button @click="visible = false">{{cancel_name}}</el-button>

              <el-button

                  type="primary"

                  @click="confirmBtn"

              >{{confirm_name}}</el-button>

          </div>

      </el-dialog>

  </div>

</template>

<script>

export default {

  name: 'BaseDialog',

  props:{

    title: { // 标题

      type: String,

      default: '提示'

    },

    isShow: { // 弹窗是否展示

      type: Boolean,

      default: false

    },

    width:{ //弹窗宽度

      type: String,

      default: ''

    },

    cancel_name:{ //取消按钮名称

      type: String,

      default: '取 消'

    },

    confirm_name:{ //确定按钮名称

      type: String,

      default: '确 定'

    },

    isShowFooter:{ //是否自定底部

      type: Boolean,

      default: true

    },

    appendToBody: { // 是否将自身插入至 body 元素，有嵌套的弹窗时一定要设置

      type: Boolean,

      default: false

    }

  },

  data() {

    return {

    };

  },

  computed: {

    visible: {

      get(){

        return this.isShow

      },

      set(val){

        this.$emit("update:isShow", false)

      }

    }

  },

   

  methods: {

    confirmBtn(){ // 触发保存

      this.$emit('handleSave')

    },

  },

  created() {},

  mounted() {},

};

</script>

<style scoped lang="scss">

  ::v-deep .el-dialog{

    .el-dialog__header{

      box-shadow: 0px 0px 5px 0px rgba(136, 152, 157, 0.3);

      border-radius: 6px 6px 0px 0px;

      padding: 20px 20px 18px 25px;

      .el-dialog__title{

        color: #212121;

        font-weight: 16px;

      }

    }

    .el-dialog__body{

        padding-left: 25px;

    }

  }

</style>

父组件：

 

<template>

  <div class="dialog-test">

    <el-button type="primary" @click="showDialog">弹窗</el-button>

    <base-dialog

        :isShow.sync="isShow"

        title="测试"

        width="703px"

        @handleSave="handleSave"

    >

      <div>我是弹窗</div>

    </base-dialog>

  </div>

</template>

<script>

export default {

  name: 'DialogTest',

  components: {

    BaseDialog: ()=> import('@/components/DialogChildren.vue'), // 引入弹窗

  },

  data(){

    return{

      isShow: false,

    }

  },

  watch:{

    isShow(newValue){ // 监听弹窗状态

        if(newValue == false){

            // 如果需要重置表单在此操作

            this.reset()

        }

    }

  },

  methods:{

    showDialog(){

      this.isShow = true

    },

    handleSave(){//点击保存按钮

  console.log('save');

    },

    reset(){

    }

  }

}

</script>