首页vant ui showConfirmDialog

vant ui showConfirmDialog

时间: 2025-06-29 20:07:21 浏览: 20

### Vant UI `showConfirmDialog` 方法的用法在 Vant UI 中，`showConfirmDialog` 是用于显示确认对话框的方法。此方法允许开发者快速创建并展示一个带有确认和取消选项的弹窗。 #### 基本语法为了调用该函数，通常会通过 JavaScript 或 TypeScript 来触发它： ```javascript import { Dialog } from 'vant'; // 显示确认对话框 Dialog.confirm({ message: '这是一条消息', }).then(() => { // 点击确认后的回调处理逻辑 }).catch(() => { // 点击取消后的回调处理逻辑 }); ``` 上述代码展示了如何使用 `confirm` 函数来打开一个简单的确认对话框[^3]。 #### 自定义配置项除了基本的消息传递外，还可以设置更多参数来自定义对话框的行为与外观： | 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | title | string | '' | 对话框标题 | | message | string \| VNode | - | 对话框内容 | | confirmButtonText | string | '确认' | 确认按钮文字 | | cancelButtonText | string | '取消' | 取消按钮文字 | 以下是包含这些属性的一个例子： ```html <template> <div @click="handleClick">点击这里</div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { Dialog } from 'vant'; const handleClick = () => { Dialog.confirm({ title: '提示', message: '这是一个自定义样式的确认对话框。', confirmButtonText: "好的", cancelButtonText: "算了" }).then(() => { console.log('用户选择了确认'); }).catch(() => { console.log('用户选择了取消'); }); }; </script> ``` 这段代码实现了当用户点击某个区域时弹出具有特定样式和文本的确认对话框，并根据不同选择执行相应操作的功能。

阅读全文