Vant Dialog 弹出框
弹出模态框,常用于消息、消息确认、在内完成特定的交互操作
弹出框组件和组件两种方式
Dialog 是而不是组件,因此可以直接,展示对应的弹窗
import { Dialog } from 'vant'; Dialog({ message: '' });
通过组件 Dialog 时,可以通过下面的方式进行
import Vue from 'vue'; import { Dialog } from 'vant'; // 全局 Vue.use(Dialog); // 局部 export default { components: { [Dialog.Component.name]: Dialog.Component } }
用于一些消息,只包含确认按钮
Dialog.alert({ title: '', message: '弹窗' }).then(() => { // on close }); Dialog.alert({ message: '弹窗' }).then(() => { // on close });
用于确认消息,包含取消和确认按钮
Dialog.confirm({ title: '', message: '弹窗' }).then(() => { // on confirm }).catch(() => { // on cancel });
function beforeClose(action, done) { if (action === 'confirm') { setTimeout(done, 1000); } else { done(); } } Dialog.confirm({ title: '', message: '弹窗', beforeClose });
引入 Dialog 组件后,会在 Vue 的 prototype 上挂载 $dialog ,在所有组件内部都可以直接此
export default { mounted() { this.$dialog.alert({ message: '弹窗' }); } }
如果需要在弹窗内嵌入组件或其他,可以使用组件的方式
<van-dialog v-model="show" title="" show-cancel-button> <img src="https://img.yzcdn.cn/vant/apple-3.jpg" rel="external " > </van-dialog>
export default { data() { return { show: false }; } }
API
通过 Dialog 时,传入以下选项:
通过组件 Dialog 时,以下 Props:
通过组件 Dialog 时,以下事件:
通过组件 Dialog 时,以下插槽: