二次封装 el-dialog

简述

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

新建弹窗组件

在 src/components 新建文件夹 BaseDialog, 文件下新建 index.vue 文件

代码如下： 属性可参照 el-dialog 中配置

<template>
  <div class="base-dialog">
      <el-dialog 
        : 
        :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('handleClick')
    },
  },
  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" 
        
        width="703px"
        @handleSave="handleSave"
    >
      <div>我是弹窗</div>
    </base-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogTest',
  components: {
    BaseDialog: ()=> import('@/components/BaseDialog'), // 引入弹窗
  },
  data(){
    return{
      isShow: false,
    }
  },
  watch:{
    isShow(newValue){ // 监听弹窗状态
        if(newValue == false){
            // 如果需要重置表单在此操作
            this.reset()
        }
    }
  },
  methods:{
    showDialog(){
      this.isShow = true
    },

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

    },

    reset(){

    }
  }
}
</script>