el-dialog写v-model

el-dialog 是 Element UI 中的一个组件，用于创建一个对话框。它没有直接支持 v-model，但可以通过自定义组件的方式实现类似的效果。

首先，创建一个自定义组件，例如 MyDialog，将 el-dialog 作为其子组件，并在该组件上绑定一个 value 属性。在 MyDialog 组件中，监听 el-dialog 的 visibleChange 事件，并在事件触发时更新 value 属性的值。

<template>
  <el-dialog :visible="value" @visible-change="handleVisibleChange">
    <!-- 对话框内容 -->
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleVisibleChange(visible) {
      this.$emit('input', visible);
    }
  }
};
</script>

然后，在使用该自定义组件时，可以使用 v-model 来绑定对话框的显示状态。

<template>
  <div>
    <el-button @click="showDialog">打开对话框</el-button>
    <my-dialog v-model="dialogVisible">
      <!-- 对话框内容 -->
      <p>这是一个自定义对话框</p>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

这样，通过 v-model 绑定 dialogVisible 属性，就可以实现 el-dialog 的显示和隐藏，并且可以在 MyDialog 组件内部进行一些其他操作。