vant-dialog
时间: 2024-12-30 18:32:33 浏览: 102
### Vant Dialog 组件使用方法
#### 函数式调用
当需要简单快捷地展示对话框时,可以采用函数形式来调用 `Dialog`。这种方式适合于只需要快速弹出消息而不涉及复杂交互的情况。
```javascript
import { Dialog } from 'vant';
// 调用后会在页面中央显示一个带有默认样式和内容的模态框
Dialog({
message: '这是一个简单的提示信息'
});
```
上述代码展示了如何通过导入 `Dialog` 并传入配置对象的方式创建并打开一个新的对话框实例[^1]。
#### 组件式调用
对于更复杂的场景,则推荐使用组件化的方式来构建对话框逻辑。这样不仅可以更好地管理状态还能方便地自定义外观和其他行为特性。
```html
<template>
<!-- 定义了一个可控制显隐属性 (v-model) 的 van-dialog -->
<van-dialog v-model:show="state.show" title="操作确认">
是否执行此动作?
<template #footer>
<button @click="cancel">取消</button>
<button @click="confirm">确定</button>
</template>
</van-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Dialog } from 'vant';
const VanDialog = Dialog.Component;
const state = reactive({
show: false,
});
function cancel() {
console.log('点击了取消');
}
function confirm() {
console.log('点击了确定');
}
</script>
```
这段代码片段说明了怎样利用 Vue Composition API 来声明响应式的 `state` 对象用于追踪对话框的状态变化,并且提供了两个处理程序分别对应“取消”与“确定”的按钮事件监听器[^2]。
#### 自定义按钮文字
如果想要更改默认情况下提供的“确认”以及“取消”按钮上的文本标签,可以通过设置相应属性实现个性化定制:
```html
<van-dialog
:before-close="onBeforeClose"
confirmButtonText="同意条款"
cancelButtonText="不同意"
/>
```
这里给出了改变按钮上显示的文字的方法,即直接给定 `confirmButtonText` 和 `cancelButtonText` 属性值即可完成修改工作[^4]。
阅读全文
相关推荐


















