函数调用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 nofollow" ></van-dialog>export default { data() { return { show: false }; }}API方法Dialog 展示弹窗 options PromiseDialog.alert 展示消息提示弹窗 options PromiseDialog.confirm 展示消息确认弹窗 options PromiseDialog.setDefaultOptions 修改默认配置,对所有 Dialog 生效 options voidDialog.resetDefaultOptions 重置默认配置,对所有 Dialog 生效 - voidDialog.close 关闭弹窗 - voidOptions通过函数调用 Dialog 时,支持传入以下选项:title 标题 string -width v2.2.7 弹窗宽度,默认单位为px number | string 320pxmessage 文本内容,支持通过\n换行 string -messageAlign 内容对齐方式,可选值为left right string centerclassName 自定义类名 any -showConfirmButton 是否展示确认按钮 boolean trueshowCancelButton 是否展示取消按钮 boolean falseconfirmButtonText 确认按钮文案 string 确认confirmButtonColor 确认按钮颜色 string #1989facancelButtonText 取消按钮文案 string 取消cancelButtonColor 取消按钮颜色 string blackoverlay 是否展示遮罩层 boolean trueoverlayClass v2.2.7 自定义遮罩层类名 string -overlayStyle v2.2.7 自定义遮罩层样式 object -closeOnPopstate v2.0.5 是否在页面回退时自动关闭 boolean falsecloseOnClickOverlay 是否在点击遮罩层后关闭弹窗 boolean falselockScroll 是否锁定背景滚动 boolean truebeforeClose 关闭前的回调函数,调用 done() 后关闭弹窗,调用 done(false) 阻止弹窗关闭 (action, done) => void -transition v2.2.6 动画类名,等价于 transtion 的name属性 string -getContainer 指定挂载的节点,用法示例 string | () => Element bodyProps通过组件调用 Dialog 时,支持以下 Props:v-model 是否显示弹窗 boolean -title 标题 string -width v2.2.7 弹窗宽度,默认单位为px number | string 320pxmessage 文本内容,支持通过\n换行 string -message-align 内容对齐方式,可选值为left right string centershow-confirm-button 是否展示确认按钮 boolean trueshow-cancel-button 是否展示取消按钮 boolean falseconfirm-button-text 确认按钮文案 string 确认confirm-button-color 确认按钮颜色 string #1989facancel-button-text 取消按钮文案 string 取消cancel-button-color 取消按钮颜色 string blackoverlay 是否展示遮罩层 boolean trueoverlay-class v2.2.7 自定义遮罩层类名 string -overlay-style v2.2.7 自定义遮罩层样式 object -close-on-popstate v2.0.5 是否在页面回退时自动关闭 boolean falseclose-on-click-overlay 是否在点击遮罩层后关闭弹窗 boolean falselazy-render 是否在显示弹层时才渲染节点 boolean truelock-scroll 是否锁定背景滚动 boolean truebefore-close 关闭前的回调函数,调用 done() 后关闭弹窗,调用 done(false) 阻止弹窗关闭 (action, done) => void -transition v2.2.6 动画类名,等价于 transtion 的name属性 string -get-container 指定挂载的节点,用法示例 string | () => Element -Events通过组件调用 Dialog 时,支持以下事件:confirm 点击确认按钮时触发 -cancel 点击取消按钮时触发 -open 打开弹窗时触发 -opened 打开弹窗且动画结束后触发 -close 关闭弹窗时触发 -closed 关闭弹窗且动画结束后触发 -Slots通过组件调用 Dialog 时,支持以下插槽:default 自定义内容title 自定义标题
文章转载于:https://www.cnblogs.com/wuliujun521/p/13492780.html
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~