首先，确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装：
npm install vant
# 或者
yarn add vant
然后，在你的 Vue 项目中，可以这样使用 Vant Dialog 组件：
<template>
<div>
<van-button @click="showDialog">显示 Dialog</van-button>
</div>
</template>
<script>
import { Dialog } from 'vant';
export default {
methods: {
showDialog() {
Dialog.alert({
title: '弹出框标题',
message: '这是一个弹出框',
})
.then(() => {
// 对话框关闭时执行的逻辑
console.log('对话框关闭');
})
.catch(() => {
// 对话框取消时执行的逻辑
console.log('对话框取消');
});
},
},
};
</script>
在这个例子中，我们使用了 Dialog.alert 方法来显示一个带有确定按钮的弹出框。你可以通过配置 title 和 message 属性来设置弹出框的标题和内容。
除了 Dialog.alert，Vant 还提供了 Dialog.confirm 方法用于显示带有确定和取消按钮的弹出框。以下是一个例子：
<template>
<div>
<van-button @click="showConfirm">显示 Confirm</van-button>
</div>
</template>
<script>
import { Dialog } from 'vant';
export default {
methods: {
showConfirm() {
Dialog.confirm({
title: '确认框标题',
message: '这是一个确认框',
})
.then(() => {
// 用户点击确定按钮时执行的逻辑
console.log('用户点击了确定');
})
.catch(() => {
// 用户点击取消按钮时执行的逻辑
console.log('用户点击了取消');
});
},
},
};
</script>
确保在你的项目中正确引入了 Vant UI 组件库，并按照文档中的方式进行配置。这只是一个简单的例子，你可以根据实际需求进一步配置和定制 Vant Dialog 组件。
转载请注明出处：http://www.zyzy.cn/article/detail/5670/Vant