zoukankan      html  css  js  c++  java
  • 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    Promise
    Dialog.alert    展示消息提示弹窗    options    Promise
    Dialog.confirm    展示消息确认弹窗    options    Promise
    Dialog.setDefaultOptions    修改默认配置,对所有 Dialog 生效    options    void
    Dialog.resetDefaultOptions    重置默认配置,对所有 Dialog 生效    -    void
    Dialog.close    关闭弹窗    -    void
    Options
    通过函数调用 Dialog 时,支持传入以下选项:
    
    title    标题    string    -
    width v2.2.7    弹窗宽度,默认单位为px    number | string    320px
    message    文本内容,支持通过
    换行    string    -
    messageAlign    内容对齐方式,可选值为left right    string    center
    className    自定义类名    any    -
    showConfirmButton    是否展示确认按钮    boolean    true
    showCancelButton    是否展示取消按钮    boolean    false
    confirmButtonText    确认按钮文案    string    确认
    confirmButtonColor    确认按钮颜色    string    #1989fa
    cancelButtonText    取消按钮文案    string    取消
    cancelButtonColor    取消按钮颜色    string    black
    overlay    是否展示遮罩层    boolean    true
    overlayClass v2.2.7    自定义遮罩层类名    string    -
    overlayStyle v2.2.7    自定义遮罩层样式    object    -
    closeOnPopstate v2.0.5    是否在页面回退时自动关闭    boolean    false
    closeOnClickOverlay    是否在点击遮罩层后关闭弹窗    boolean    false
    lockScroll    是否锁定背景滚动    boolean    true
    beforeClose    关闭前的回调函数,
    调用 done() 后关闭弹窗,
    调用 done(false) 阻止弹窗关闭    (action, done) => void    -
    transition v2.2.6    动画类名,等价于 transtion 的name属性    string    -
    getContainer    指定挂载的节点,用法示例    string | () => Element    body
    Props
    通过组件调用 Dialog 时,支持以下 Props:
    
    v-model    是否显示弹窗    boolean    -
    title    标题    string    -
    width v2.2.7    弹窗宽度,默认单位为px    number | string    320px
    message    文本内容,支持通过
    换行    string    -
    message-align    内容对齐方式,可选值为left right    string    center
    show-confirm-button    是否展示确认按钮    boolean    true
    show-cancel-button    是否展示取消按钮    boolean    false
    confirm-button-text    确认按钮文案    string    确认
    confirm-button-color    确认按钮颜色    string    #1989fa
    cancel-button-text    取消按钮文案    string    取消
    cancel-button-color    取消按钮颜色    string    black
    overlay    是否展示遮罩层    boolean    true
    overlay-class v2.2.7    自定义遮罩层类名    string    -
    overlay-style v2.2.7    自定义遮罩层样式    object    -
    close-on-popstate v2.0.5    是否在页面回退时自动关闭    boolean    false
    close-on-click-overlay    是否在点击遮罩层后关闭弹窗    boolean    false
    lazy-render    是否在显示弹层时才渲染节点    boolean    true
    lock-scroll    是否锁定背景滚动    boolean    true
    before-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    自定义标题
  • 相关阅读:
    mapreduce框架详解【转载】
    Hadoop的基本命令【转载】
    mininet实验 设置带宽之简单性能测试
    Opendarlight Carbon 安装
    mininet实验 测量路径损耗率
    Controller与Switch建立连接
    OpenFlow协议
    Controller控制器
    进击的SDN
    SDN前瞻 传统网络的缺陷
  • 原文地址:https://www.cnblogs.com/wuliujun521/p/13492780.html
Copyright © 2011-2022 走看看