更新记录

0.0.1（2026-05-02）

新增

• 新增配置式表单组件 zb-form-builder，支持字段配置、表单值收集和基础提交。
• 新增验证码输入 zb-code-input，支持固定位数输入和完成事件。
• 新增密码输入 zb-password-input，支持显隐切换和输入事件。
• 新增单列选择器 zb-picker 和日期选择器 zb-date-picker。
• 新增图片上传组件 zb-upload，支持选择、预览、删除和数量限制。
• 新增筛选弹层 zb-filter-popup，支持重置、关闭和确认事件。
• 新增底部提交栏 zb-submit-bar 和协议勾选 zb-agreement。
• 新增基础校验工具 utils/validate.js。

优化

• 补充完整首页 demo，覆盖验证码、密码、选择器、日期、上传、筛选和提交栏截图场景。
• 补充详情页级 readme.md，完善组件 API、平台兼容性、权限说明和使用边界。
• 完善插件市场发布配置、平台兼容性、授权价格和文档说明。

注意

• 当前定位为业务场景 UI 组件，不重复实现完整基础 UI 组件库。
• 图片上传能力需要在 App/小程序真机环境复测。

平台兼容性

uni-app(5.08)

uni-app x(5.08)

其他

业务 UI 组件库

zhuanz-businessui 面向业务页面，提供表单、选择、上传、筛选和提交流程组件。

适合认证资料页、订单筛选页、登录验证码页、资料上传页、协议确认页等中后台和业务 App 常见场景。插件定位是业务场景组件，不重复提供完整基础 UI 组件库。

安装路径

将插件目录放入项目：

uni_modules/zhuanz-businessui

组件清单

• zb-form-builder：配置式表单
• zb-code-input：验证码输入
• zb-password-input：密码输入
• zb-picker：单列选择器
• zb-date-picker：日期选择器
• zb-upload：图片上传
• zb-filter-popup：筛选弹层
• zb-submit-bar：底部提交栏
• zb-agreement：协议勾选

工具方法

• utils/validate.js：基础校验方法，支持必填、正则和自定义函数。

快速示例

<template>
  <view>
    <zb-code-input v-model="code" />
    <zb-picker v-model="type" :columns="types" />
    <zb-upload :file-list="files" @change="files = $event.fileList" />
    <zb-submit-bar button-text="提交" @submit="submit" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      type: '',
      files: [],
      types: [
        { label: '个人认证', value: 'person' },
        { label: '企业认证', value: 'company' }
      ]
    }
  },
  methods: {
    submit() {
      uni.showToast({ title: '提交成功', icon: 'none' })
    }
  }
}
</script>

主要组件 API

zb-code-input

zb-password-input

zb-picker

zb-upload

zb-filter-popup

平台兼容性

• uni-app Vue2 / Vue3：支持
• H5：支持
• App Vue：支持
• 微信小程序：支持
• 支付宝小程序：支持
• uni-app x：支持 Web 和 App，需按实际项目运行环境验证

权限说明

• 插件不主动采集数据。
• zb-upload 使用 uni.chooseImage，相册/相机权限由宿主工程按需申请。
• 插件不包含服务端上传逻辑，图片上传到服务器由业务侧自行处理。

注意事项

• 当前插件聚焦业务 UI 流程，不包含完整基础 UI 能力。
• 首版图片上传基于 uni.chooseImage，不包含文件上传和服务端直传。
• 表单校验工具提供基础能力，复杂联动校验建议业务侧自行封装。