移动端弹出类组件

移动端提供的弹出类组件包括：对话框、弹出层、遮罩层、动作面板、分享面板、消息提示、轻提示、加载中、下拉菜单、vant 气泡菜单等组件

• 对话框：用于消息确认和打开页面

• 弹出层：可从上、下、左、右、中间弹出

• 遮罩层：显示内容自由定义

• 动作面板：底部弹出的菜单

• 分享面板：底部弹出的菜单

• 消息提示：顶部显示消息，支持自动消失

• 轻提示：上部、中部、下部显示消息，支持自动消失

• 加载中

• 下拉菜单

• 气泡菜单

对话框

对话框组件提供两种模式：组件模式和页面模式

• 组件模式：弹出模态框，常用于消息提示、消息确认
• 页面模式：打开页面

组件模式

组件模式对应官网弹出框组件，弹出模态框，用于消息提示、消息确认，运行效果如下图所示。支持组件调用和函数调用

组件调用

对话框组件的“类型”属性设置为“组件模式”，设置“标题”、“文本”属性，设计时界面如下图所示

组件提供“打开”操作，用于打开对话框

组件模式触发以下4个事件

• 打开 open
• 关闭前 beforeClose
• 确认 confirm：点击确认按钮时触发
• 取消 cancel：点击取消按钮时触发

函数调用

为了便于使用 Dialog，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的弹窗组件。

vue

后续支持

页面模式

对话框组件在页面模式下，用于打开一个页面，支持配置数据映射，将打开的页面中的数据返回到父页面中。

对话框组件的“类型”属性设置为“页面模式”，选择“页面文件”，设置“标题”，设计时界面如下图所示

使用对话框组件提供的“打开”操作，打开子页面。通过“配置数据映射”，将子页面中的数据组件（返回数据）和父页面中的数据组件（目标数据）进行列的映射，如下图所示

在子页面中执行“确定返回”操作时，系统通过数据映射关系，将子页面返回的数据，写入父页面的目标数据

页面模式触发以下3个事件

• 打开 open
• 接收消息 message：不使用数据映射，在此事件中获取返回数据，自行处理
• 关闭 close

特别说明：接收消息事件会触发两次，控制台输出如下图所示

• 第一次是返回数据，里面包括 message.data
• 第二次是关闭页面，里面没有 message.data

弹出层

弹出层组件，属性说明如下

• “位置”属性：设置从上、下、左、右、中间弹出
• “圆角”属性：控制是否显示圆角
• “关闭图标”属性：控制是否显示关闭图标，及使用哪个图标
• 显示内容：显示弹出层设计区，以便拖拽组件

从左或右弹出时，高度和宽度需要定义样式，例如设置弹出层高度为100%，宽度为40%，样式代码定义如下，弹出层组件添加这个样式，如下图所示

    .x-van-popup-right-40{
        height: 100%;
        width: 40%;
    }

弹出层提供显示、关闭两个操作，open 和 close 两个方法，开启组件引用后，在 JS 中可以调用组件的方法。开启组件引用如下图所示

关闭弹出层代码如下

    onOkBtnClick = (event) => {
        this.comp("popup0").close();
    }

运行效果如下图所示

遮罩层

遮罩层组件支持内容自定义。内容从左上角开始显示。内容水平、垂直居中需要定义样式，样式代码定义如下，遮罩层组件添加这个样式，如下图所示

    .x-van-overlay-center{
        display: flex;
        align-items: center;
        justify-content: center;
    }

点击遮罩层中的组件，会关闭遮罩层，可以使用阻止冒泡的方法 event.stopPropagation(); 不关闭遮罩层。遮罩层运行效果如下

动作面板

动作面板组件用于从底部弹出一个菜单，运行效果如下图所示

提供“选择”事件，用于选择后获取选中信息，react 通过 event.detail 获取，vue 通过 action 获取，在选择事件中输出，如下图所示

分享面板

动作面板组件用于从底部弹出一个菜单，运行效果如下图所示

提供“选择分享选项”事件，用于选择后获取选中信息，react 通过 event.detail 获取，vue 通过 option 获取，在选择事件中输出，如下图所示

消息提示

消息提示组件用于在顶部显示一个消息，支持设置时长自动消失，运行效果如下图所示。支持组件调用和函数调用

组件调用

消息提示组件提供显示操作，用于显示一个消息，设计界面如下图所示

函数调用

为了便于使用 Notify，Vant 和 vantui 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的消息提示。

react

提供 Notify.show 函数，用于通过代码显示一个消息。方法定义如下

方法名：
    Notify.show

参数：
    message：消息内容
    type：消息类型，支持 primary、success、warning、danger 等四种类型，默认为 danger
    duration：显示时长，单位毫秒
    color：字色
    background：背景色

示例代码如下

import { Notify } from '@antmjs/vantui';

    onNotifyBtnClick = (event) => {
        Notify.show({
            message: '-----通知内容-----',
            type: 'primary',
        })
    }

    onNotify2BtnClick = (event) => {
        Notify.show({
            message: '自定义颜色',
            color: '#ad0000',
            background: '#ffe1e1',
            duration: 10000,
        })
    }

vue

提供 showNotify 和 closeNotify 函数，用于通过代码显示或关闭一个消息。方法定义如下

方法名：
    showNotify

参数：
    message：消息内容
    type：消息类型，支持 primary、success、warning、danger 等四种类型，默认为 danger
    duration：显示时长，单位毫秒
    color：字色
    background：背景色
    position：弹出位置，可选择 top 和 bottom

方法名：
    closeNotify

示例代码如下

import { showNotify, closeNotify } from 'vant';

// 3 秒后自动关闭
showNotify('通知内容');

// 主动关闭
closeNotify();

showNotify({
  message: '通知内容',
  type: 'primary',
  color: '#ad0000',
  background: '#ffe1e1',
  position: 'bottom',
  duration: 1000,
});

轻提示

轻提示组件用于在页面上部、中部、下部显示消息，支持设置时长自动消失，运行效果如下图所示。支持组件调用和函数调用

组件调用

react

轻提示组件提供“执行”操作，用于显示消息、清除消息、修改默认选项，设计界面如下图所示

操作类型

• 显示、成功、失败、加载：显示消息
• 清空：清除消息，如下图所示
• 设置默认选项、重置默认选项：修改默认选项

轻提示组件提供 execute 方法，用于通过代码显示消息、清除消息、修改默认选项。方法定义如下

方法名：
    execute

参数：
    executeType：操作类型，支持 show、success、fail、loading、clear、setDefaultOptions、resetDefaultOptions 
    duration：显示时长，单位毫秒。设置为0提示不消失
    position：展示位置，top、middle、bottom
    message：消息内容
    forbidClick：是否禁止背景点击
    mask：是否显示蒙层

示例代码如下

    this.comp("toast0").execute({ 
        executeType: "loading",
        position: "middle",
        message: '加载中',
        forbidClick: true
    })

实现加载中效果

使用轻提示组件实现加载中效果，如下图所示

例如：加载中效果，2秒后清除，示例代码如下

    onLoadingBtnClick = (event) => {
        this.comp("toast0").execute({ 
            executeType: "loading",
            position: "middle",
            message: '加载中',
            duration: 0,
            forbidClick: true
        })
        window.setTimeout(()=>{
            this.comp("toast0").execute({
                executeType: "clear"
            })
        },2000);
    }

vue

组件属性说明如下

• 提示类型：加载、成功、失败、超文本标记（html）、文本
• 位置：顶部、居中、底部
• 文本内容：提示类型设置为超文本标记时，文本内容写对应的 html 片段

轻提示组件提供“显示”、“关闭”操作，用于显示消息、清除消息、使用界面如下图所示

函数调用

为了便于使用 Toast，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的轻提示。

vue

showToast 方法：在屏幕中间展示一条文字提示 showLoadingToast 方法：展示加载提示 showSuccessToast 方法：展示成功提示 showFailToast 方法：展示失败提示

方法说明如下

方法名
    showToast
参数
    message：文本内容，支持通过 \n 换行
    type：提示类型，可选值为 loading success fail html
    position：位置，默认渲染在屏幕正中位置，可选值为 top bottom
    wordBreak：文本内容的换行方式，可选值为 normal break-all break-word
    forbidClick：是否禁止背景点击
    duration：展示时长(ms)，值为 0 时，toast 不会消失

示例代码如下

import { showToast, showLoadingToast, showSuccessToast, showFailToast, closeToast } from 'vant';

let onShowToastBtnClick = (event) => {
    showToast('提示内容');
    showSuccessToast('成功文案');
    showFailToast('失败文案');
    showToast({
        message: '底部展示',
        position: 'bottom',
    });
    showToast({
        message: '自定义图标',
        icon: 'like-o',
    });
    showToast({
        message: '自定义图片',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
    });
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });
    closeToast();
}

加载中

加载中组件用于在页面弹出黑色半透明遮罩，显示加载图标和文本提示，运行效果如下图所示

属性说明如下

• 显示：控制是否显示加载中
• 类型：提供两种图标：齿轮和圆环
• 文本：文本提示内容
• 垂直：设置图标和文本是垂直排列还是水平排列
• 点击遮罩关闭：一般来说设置为否，执行一个长时间的操作，禁止用户点击屏幕，在操作完成后，通过代码关闭遮罩

下拉菜单

下拉菜单组件用于显示向下弹出的菜单列表，支持自定义内容，运行效果如下图所示

下拉菜单

自定义内容

下拉菜单中可以包含多个下拉菜单项，在下拉菜单项中设置“选项”以显示为菜单。

特别说明

• 此时不要设置菜单项标题，因为菜单项标题是动态的，系统根据用户在选项中的选择动态设置
• 默认选项值必须设置，设置为某个选项的值，注意不需要写引号

提供“点击选项”事件，用于点击选项后获取选项信息，通过 value 获取，在点击选项事件中输出，如下图所示

在下拉菜单项中添加组件实现自定义内容

开启组件引用，调用下拉菜单项的 toggle 方法或下拉菜单的菜单项切换操作，关闭下拉菜单项，代码如下

vue 代码

$page.comp("dropdownItem1").toggle();

vant 气泡弹出框

气泡弹出框组件用于显示弹出式的气泡菜单，支持纵向菜单、横向菜单，支持浅色主题、深色主题，支持自定义内容。运行效果如下图所示

• 选项列表：设置选项信息，包括选项文字、左侧图标、是否禁用
• 选项排列方向：设置菜单横向排列还是纵向排列
• 位置：设置气泡的弹出位置
• 主题风格：支持浅色和深色两种风格

提供“点击选项”事件，用于点击选项后获取选项信息，通过 action 获取，在点击选项事件中输出，如下图所示

点击“显示”自定义内容，设计界面如下图所示

自定义内容时，通过“显示”属性控制气泡是否显示

• 在“打开菜单”事件中设置为显示
• 在气泡的合适内容上设置为不显示

弹出类组件

弹出类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

案例位置

移动-页面-页面交互-*.w