vant弹窗提示

函数调用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    自定义标题