element抽屉的再次封装

平时用element比较多，里边的有个抽屉的插件，我们的项目一般用这个功能的时候，都会再里边加个确定，取消按钮，所以就需要封装一下，方便使用

 <el-dialog :visible.sync="visibleDialog">
    <!--内容区域的默认插槽-->
    <slot></slot>
    <span>
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">
            确 定
      </el-button>
    </span>
  </el-dialog>

<script>
export default {
  props: {
    // 显示隐藏弹框
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible",val);
      }
    }
  },
  methods: {
    // 取消事件
    handleCancel() {
      this.$emit("cancel");
    },
    // 确定事件
    handleConfirm() {
      this.$emit("confirm");
    }
  }
};
</script>

调用的话

<custom-dialog
    :visible.sync="visibleDialog"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    这是一段内容
  </custom-dialog>