Vue2+Elementui Dialog 封装自定义弹窗组件

<template>
  <el-dialog
    :visible.sync="visible"
    :title="title"
    :width="width"
    :before-close="handleClose"
    @open="onOpen"
    @close="onClose"
  >
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '30%'
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
    },
    handleConfirm() {
      this.$emit('confirm');
      this.handleClose();
    },
    onOpen() {
      this.$emit('open');
    },
    onClose() {
      this.$emit('close');
    }
  }
};
</script>

这个代码实例展示了如何在Vue2中使用Element UI的el-dialog组件来封装一个自定义的弹窗组件。它包括了标题、宽度、打开和关闭时的处理逻辑，并且可以通过插槽来传递内容。这个组件可以被其他组件复用，从而减少重复的代码并提高开发效率。