vue3里vant的Dialog怎么用

在 Vue 3 中使用 Vant 的 Dialog 组件，需要先安装 vant 库，可以使用 npm 或 yarn 进行安装：

npm install vant

或

yarn add vant

然后在需要使用 Dialog 的组件中引入：

<template>
  <div>
    <van-button type="primary" @click="showDialog">显示 Dialog</van-button>
    <van-dialog v-model="show" title="标题" message="这里是内容"></van-dialog>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Button, Dialog } from 'vant';

export default defineComponent({
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
  },
  setup() {
    const show = ref(false);
    const showDialog = () => {
      show.value = true;
    };

    return {
      show,
      showDialog,
    };
  },
});
</script>

在上面的代码中，我们首先引入了 Vant 的 Button 和 Dialog 组件，然后在组件的 setup 函数中定义了一个名为 show 的响应式变量和一个名为 showDialog 的方法，showDialog 方法用来改变 show 变量的值，从而控制 Dialog 的显示和隐藏。在模板中，我们通过 @click 事件绑定 showDialog 方法，当按钮被点击时，Dialog 就会显示出来。

需要注意的是，在 Vue 3 中，需要使用 ref 来定义响应式变量，而不能使用 data 函数。同时，也不能直接通过 this 来访问组件实例的属性和方法，而是需要使用 setup 函数来定义组件的属性和方法。