VUE3的dialog使用visible还是v-model？

在Vue 3中，`v-model`指令被废弃了，对话框的可见性一般使用`visible`属性进行控制。你可以使用`v-if`指令或者直接在对话框组件中使用`visible`属性来控制对话框的显示与隐藏。例如：

<template>
  <div>
    <button @click="showDialog">显示对话框</button>
    <dialog :visible="visible" @close="closeDialog">
      <!-- 对话框内容 -->
    </dialog>
  </div>
</template>

<script>
import Dialog from './components/Dialog.vue';

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

在上述代码中，通过点击按钮来控制`visible`属性的值，从而控制对话框的显示与隐藏。同时，监听对话框的关闭事件`@close`，在关闭事件中将`visible`属性设为`false`来隐藏对话框。

相关问题

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 组件内部进行一些其他操作。

v-model:visible

v-model:visible 是 Vue.js 中的一个指令，它通常用于控制元素的显示和隐藏。通过使用 v-model 指令，我们可以将一个变量与元素的显示状态进行绑定。

例如，我们可以在一个组件中使用 v-model:visible 来控制一个对话框的显示和隐藏：

<template>
  <div>
    <button @click="showDialog">Show Dialog</button>
    <Dialog v-model:visible="dialogVisible" />
  </div>
</template>

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

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

在上面的代码中，我们定义了一个按钮用于显示对话框，当按钮被点击时，我们将 dialogVisible 变量设置为 true，从而触发对话框的显示。而通过 v-model:visible 指令，我们可以将 dialogVisible 变量与对话框的显示状态进行绑定，这样在改变 dialogVisible 的值时，对话框的显示状态也会相应地发生变化。

希望能解答你的问题！如果还有其他问题，请随时提问。