vant4 使用Dailog

Vant4 是一个基于 Vue.js 的 UI 组件库，它提供了丰富的组件和样式，帮助开发者快速构建用户界面。如果你想在 Vant4 中使用对话框（Dialog）组件，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 进行安装：

npm install vant@next
# 或者
yarn add vant@next

2. 在需要使用对话框的组件中，引入 Dialog 组件，并在 template 中使用它：

<template>
  <div>
    <van-button @click="showDialog">显示对话框</van-button>
    <van-dialog v-model="show" title="标题" message="内容" />
  </div>
</template>

<script>
import { Dialog } from 'vant';

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

在上述示例中，我们通过 `import { Dialog } from 'vant';` 引入了 Dialog 组件，并将其注册到当前组件中。然后，在 template 中使用 `<van-dialog>` 标签来渲染对话框，并通过 `v-model` 双向绑定了 show 属性，来控制对话框的显示和隐藏。

当点击按钮时，调用 `showDialog` 方法设置 show 属性为 true，对话框将会显示出来。

这就是在 Vant4 中使用 Dialog 组件的基本步骤。你可以根据自己的需求，通过配置 Dialog 组件的属性和事件来实现更多定制化的功能。