Vue3通过v-model绑定el-dialog组件

在Vue 3中，v-model 用于创建双向绑定，但它并不直接适用于所有组件，包括 Element UI 的 el-dialog 组件。el-dialog 组件是用来控制对话框显示与否的，它有一个 visible 属性，但没有直接使用 v-model 的机制。

要通过 v-model 来控制 el-dialog 的显示与隐藏，你需要自定义一个双向绑定的属性和事件。以下是一个简单的示例：

<template>
  <el-dialog :visible="isDialogVisible" @close="isDialogVisible = false">
    <!-- 对话框内容 -->
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const isDialogVisible = ref(false);
 
    return { isDialogVisible };
  },
};
</script>

在这个例子中，isDialogVisible 是一个响应式数据，它绑定到 el-dialog 的 visible 属性上。当对话框关闭时，@close 事件会被触发，并将 isDialogVisible 设置为 false，从而关闭对话框。

要通过点击一个按钮来打开对话框并建立 v-model 绑定，可以这样做：

<template>
  <el-button @click="isDialogVisible = true">打开对话框</el-button>
  <el-dialog v-model="isDialogVisible" @close="isDialogVisible = false">
    <!-- 对话框内容 -->
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const isDialogVisible = ref(false);
 
    return { isDialogVisible };
  },
};
</script>

在这个例子中，点击按钮会将 isDialogVisible 设置为 true，从而打开对话框。通过使用 v-model 指令，用户可以通过点击对话框上的关闭按钮来关闭对话框，这实际上是在操作 isDialogVisible 这个响应式数据。