首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-dialog：
<template>
<div>
<van-button @click="showDialog">显示弹出框</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Button, Dialog } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Button.name]: Button,
[Dialog.name]: Dialog,
},
setup() {
const showDialog = () => {
Dialog({
title: '提示',
message: '这是一个对话框',
confirmButtonText: '确定',
cancelButtonText: '取消',
onConfirm: () => {
console.log('点击了确定按钮');
},
onCancel: () => {
console.log('点击了取消按钮');
},
});
};
return {
showDialog,
};
},
};
</script>
在上面的例子中，我们使用了 van-dialog 组件，并通过调用 Dialog 函数来显示弹出框。
Dialog 函数接受一个配置对象，其中 title 表示弹出框的标题，message 表示弹出框的内容，confirmButtonText 表示确认按钮的文本，cancelButtonText 表示取消按钮的文本。通过监听 onConfirm 和 onCancel 事件，可以分别获取用户点击确认和取消按钮时的回调。
你可以根据实际需求，进一步设置其他属性来满足你的需求。
转载请注明出处：http://www.zyzy.cn/article/detail/5820/Vant