首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Dialog组件：
<template>
<div>
<van-button @click="showDialog">打开弹出框</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Dialog } from 'vant';
export default {
components: {
[Dialog.name]: Dialog,
},
setup() {
const showDialog = () => {
Dialog({
title: '提示',
message: '这是一个弹出框',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(() => {
// 用户点击确定按钮时的操作
console.log('点击了确定按钮');
})
.catch(() => {
// 用户点击取消按钮时的操作
console.log('点击了取消按钮');
});
};
return {
showDialog,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的showDialog函数，用于打开弹出框。然后，在模板中使用<van-button>标签引入了Vant3的按钮组件，并通过@click监听按钮点击事件，触发showDialog方法。
在showDialog方法中，我们调用Dialog函数打开弹出框。通过title设置弹出框标题，通过message设置弹出框内容。showCancelButton表示是否显示取消按钮，confirmButtonText和cancelButtonText分别设置确定按钮和取消按钮的文本。
通过.then和.catch方法分别监听用户点击确定和取消按钮时的操作。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5735/Vant