基于Vue.js和Element UI框架的自定义对话框组件

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    :before-close="handleClose">
    <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 {
  props: {
    title: {
      type: String,
      default: '自定义对话框'
    },
    width: {
      type: String,
      default: '30%'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$emit('confirm');
      this.dialogVisible = false;
    }
  }
};
</script>

这个代码实例展示了如何创建一个基于Vue.js和Element UI的自定义对话框组件。该组件包含了一个可以插入自定义内容的插槽，并且可以通过props接收标题、宽度和对话框显示状态。通过watch监听器，它同步父组件传递的visible属性和内部的dialogVisible状态。点击取消和确定按钮时分别触发关闭对话框的方法。这个例子简洁明了，展示了如何在Vue.js中创建可复用的组件。