移动端其它类组件

下面列举几个常用的组件：序号组件、过滤组件、回到顶部、二维码、条形码、发送短信、短信验证码、行为验证码、剪贴板、扫一扫、摇一摇等组件。

序号组件

序号组件提供生成序号的能力，参考《桌面端其它类组件》中的序号组件

过滤组件

系统提供2个用于过滤数据的过滤组件，分别是：搜索和时间过滤

搜索

搜索组件是用于对一个数据组件的多列进行过滤，多列之间是或者的关系，运行效果如下图所示

1731029912298

搜索组件属性说明如下，设计界面如下图所示

  • 过滤数据集：选择要过滤数据的数据组件
  • 过滤列：可选择多列，任意一列包含搜索内容，就会被查询出来

1731030774216

  • 对齐方式：设置搜索框内容的对齐方式，可选值为左、中、右
  • 左侧图标：设置左侧图标，支持点击事件
  • 右侧图标：设置右侧图标，支持点击事件
  • 占位提示：设置搜索框为空时显示的文字
  • 背景色：设置搜索框外部背景色
  • 形状：设置搜索框的形状，可选值为圆形、方形
  • 清空：是否显示清空按钮
  • 自动完成：input 标签原生的自动完成属性

1731030900465

组件提供事件说明如下

  • 搜索事件：点击键盘上的搜索/回车按钮后触发
  • 取消事件：点击搜索框右侧取消按钮时触发
  • 点击左侧图标事件：点击左侧图标时触发
  • 点击右侧图标事件：点击右侧图标时触发

1731030967886

时间过滤

时间过滤组件用于对一个数据组件的日期列进行过滤，支持两种过滤模式，运行效果如下图所示

  • 单日期过滤：对一个日期列进行过滤，日期在查询范围内，就会被查询出来
  • 日期范围过滤：对两个日期列进行过滤，日期范围包含查询范围，就会被查询出来

1731029995009

点击右侧...弹出过滤条件窗口，如下图所示

1731030011931

对一个日期列进行过滤，日期过滤组件的属性设置如下图所示

  • 过滤数据集：选择要过滤数据的数据组件
  • 过滤模式：单日期过滤
  • 过滤日期：选择要过滤的日期列
  • 自动刷新数据：选择后是否立即刷新数据

1731032646042

对两个日期列进行过滤，日期过滤组件的属性设置如下图所示

  • 过滤数据集：选择要过滤数据的数据组件
  • 过滤模式：日期范围过滤
  • 开始日期：选择要过滤的两个日期列中的开始日期
  • 结束日期：选择要过滤的两个日期列中的结束日期
  • 自动刷新数据：选择后是否立即刷新数据

1731032679362

vant 回到顶部

回到顶部组件用于返回页面顶部，运行效果如下图所示

1731035298276

组件属性说明如下

  • 滚动高度：当页面滚动（例如 200px）时，右下角会出现返回顶部按钮
  • 底部距离、右侧距离：设置组件距离右侧和底部的位置
  • 瞬间滚动：设置页面滚动的过程是否有过渡效果，没有过度效果是瞬间滚动到顶部

1731035589961

二维码

二维码组件用于显示一个二维码，运行效果如下图所示

1731045857224

组件属性说明如下

  • 文本：生成二维码的文本
  • 大小：二维码的大小

1731045966398

react 二维码使用 taro-code 组件，参考 https://github.com/miaonster/taro-code

vue 二维码使用 vue-qrcode 组件，参考 https://github.com/fengyuanchen/vue-qrcode

条形码

条形码组件用于显示一个条形码，运行效果如下图所示

1731045884704

组件属性说明如下

  • 文本：生成条形码的文本
  • 条形码高；条形码的高度
  • 显示文本：是否显示文本

1731046025063

react 条形码使用 react-barcode 组件，参考 https://gitcode.com/gh_mirrors/re/react-barcode

vue 条形码使用 vue-barcode 组件，参考 https://github.com/fengyuanchen/vue-barcode

音频

播放一个音频文件，运行效果如下图所示

1730971107596

在资源地址属性中绑定数据列，数据列中可以是通过附件组件上传的音频文件。支持设置是否显示控件，设计界面如下图所示

1730971305773

react 使用 taro audio 组件，参考 https://taro.redwoodjs.cn/docs/1.x/components/media/audio/

vue 使用 html audio

视频

播放一个视频文件，运行效果如下图所示

1730971150856

在资源地址属性中绑定数据列，数据列中可以是通过附件组件上传的视频文件，设计界面如下图所示

1730971446757

vue 使用 videojs 组件，参考 http://videojs.com。通过高度属性设置高度，如上图所示。另外小窗显示时，需要添加下面的样式，实现显示为页面的一部分

:deep{
    .video0-dimensions.vjs-fluid {
        padding-top: 0;
    }
}

react 使用 taro video 组件，参考 https://taro.redwoodjs.cn/docs/1.x/components/media/video/。通过样式设置视频高度，如下图所示

1730972130111

发送短信组件

系统提供2个用于发送短信的组件，分别是：短信验证码和短信

短信配置

使用短信功能前，进入“企业门户-系统管理-系统配置-统一通用配置”，添加短信配置，界面如下图所示

1731048489649

配置验证码模板后，可以发送验证码。另外还支持自定义短信

1731050595717

短信 API

系统提供短信服务，包括3个 API

发送短信

  • 请求地址：/sms/send/:phone?templ=
  • 请求方式：POST
  • 输入参数
    • phone：手机号
    • templ：短信编码
    • body：短信模板中的参数，JSON 格式
  • 返回结果
    • 成功返回
  {
    "success": true,
    "msg": ""
  }

发送验证码

  • 请求地址：/sms/send/:phone/verify/code?templ=
  • 请求方式：POST
  • 输入参数
    • phone：手机号
    • templ：验证码模板编码
  • 返回结果
    • 成功返回
  {
    "success": true,
    "msg": ""
  }

校验验证码

  • 请求地址：/sms/check/:phone/:verifyCode
  • 请求方式：POST
  • 输入参数
    • phone：手机号
    • verifyCode：验证码
  • 返回结果
    • 成功返回
  {
    "success": true,
    "msg": ""
  }

短信验证码

短信验证码组件用于发送短信验证码，发送验证码后，显示60秒倒计时，运行效果如下图所示

1731047988471

组件属性说明如下

  • 手机号码
  • 模板：验证码有3种模板，发送短信内容不同
    • 注册验证码模板：sms-user-reg
    • 修改密码验证码模板：sms-password-reset
    • 通用验证码模板：sms-verify-code
  • 按钮配置：自定义发送验证码按钮的样式

1731048065176

组件提供“发送验证码”操作和方法，调用发送验证码 API，提供“校验验证码”操作和方法，调用校验验证码 API

短信

短信组件用于发送短信，提供“发送短信”操作和方法，调用发送短信 API，提供“发送验证码”操作和方法，调用发送验证码 API，设计界面如下图所示

1731050980131

vantui 行为验证码

行为验证码组件用于通过用户拖动滑块到指定位置来完成验证，是一种流行的验证方式，运行效果如下图所示

1731401240113

组件属性说明如下

  • 图片：绑定数据组件当前行的某列，这个列中可以包括多张图片（通过附件组件上传），行为验证码组件会使用其中一张图片作为背景图
  • 文本：显示在滑块轨道上的文字

1731401300022

组件事件说明如下

  • 验证成功：用户将滑块拖动到指定位置后触发
  • 验证失败：用于未将滑块拖动到指定位置时触发

1731401344274

验证成功、验证失败的示例代码如下

    onImageSlide0Success = (event) => {
        this.hint("验证成功");
    }

    onImageSlide0Fail = (event) => {
        this.hint("验证失败","warning");
    }

vantui 剪贴板

剪贴板组件用于将内容复制到剪贴板，以及从剪贴板中获取内容。

剪贴板组件提供设置系统剪贴板、获取系统剪贴板两个操作和方法。

设置系统剪贴板操作的使用界面如下图所示

1731549695453

获取系统剪贴板方法（此方法为异步方法）的示例代码如下

    onGetBtnClick = async (event) => {
        let {data} = await this.comp("clipboard0").get();
        this.comp("pageData").setValue("value",data);
    }

vantui 扫一扫

扫一扫组件用于打开手机摄像头，扫描二维码，获取二维码信息。该组件在网页中不能使用，需要在有 Cordova 插件的 App 或微信小程序中使用。

扫一扫组件提供扫一扫操作和方法，扫一扫操作的使用界面如下图所示

1731401461742

扫一扫组件提供成功和失败两个事件

1731401485062

扫描成功后触发成功事件，result 是二维码内容；扫描失败后触发失败事件，errMsg 是错误消息，两个事件的示例代码如下

    onScanCode0Success = (event) => {
        let {detail:{charSet, errMsg, result}} = event;
        this.hint(result);
    }

    onScanCode0Fail = (event) => {
        let {detail:{charSet, errMsg, result}} = event;
        this.hint(errMsg);
    }

vantui 摇一摇

摇一摇组件用于捕捉用户是否摇动手机。该组件在网页中不能使用，需要在有 Cordova 插件的 App 或微信小程序中使用。

  • 提供“间隔”属性，控制两次摇一摇的时间间隔
  • 提供开始监听和停止监听两个操作和方法。开始监听操作的使用界面如下图所示

1731401549593

  • 提供“完成”事件，用户摇动手机后，触发完成事件，事件的使用界面如下图所示

1731401585613

其它类组件

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

组件 用途 Vantui 官网 Vant 官网
搜索 用于搜索场景的输入框组件 搜索 搜索
回到顶部 返回页面顶部的操作按钮 回到顶部

案例位置

移动-页面-其它组件-*.w

桌面-页面-其它组件-序号组件.w

移动-页面-面板展示组件-水印.w（二维码、条形码）

移动-页面-页面布局-粘性布局.w（回到顶部）

results matching ""

    No results matching ""