更新记录

0.1.0（2026-09-14） 下载此版本

首个发布版本。

提供 13 个面向 uni-app Vue3（App-vue / H5）的 easycom 组件：

• 弹层与选择器：cadt-modal、cadt-select、cadt-picker、cadt-combox、cadt-text-picker、cadt-table-selector、cadt-tag-table、cadt-cascader
• 表单与导航：cadt-header、cadt-number-box、cadt-lockable-field、cadt-step
• 信息展示：cadt-card

配套公共能力：自绘弹层返回键栈 common/overlay-stack.js 与页面接入用 useOverlayBackPress()、轻量防抖 common/debounce.js。

平台兼容性

uni-app(5.07)

uni-app x(5.24)

其他

cadt-ui

面向 uni-app Vue3（App-vue / H5）的通用组件库，为 PDA / 小屏手持设备场景打磨：弹层、选择器、表单控件与信息展示。组件遵循 easycom 规范，安装后直接使用 <cadt-*> 标签，无需 import、无需注册。

本库为普通 uni-app（Vue3，.vue）版本，不支持 Vue2 / nvue；不含 uni-app x（.uvue）版本。

特性

• 一个 uni_modules 多组件包，按需 easycom 自动引入，未使用的组件不打包。
• 选择器全家桶：单选/多选弹层、弹层选择器、可输入下拉、分页表格选择、标签表格、多级钻取。
• 自绘 fixed 遮罩弹层，支持「物理返回先关弹层」与 backClosable=false 拦截返回。
• 不依赖任何业务接口 / store / 全局配置，可直接放进任意 uni-app Vue3 工程。

平台兼容

组件面向 PDA 竖屏设计与实测，小程序平台未做兼容验证，不建议直接用于小程序生产环境。

安装

在 DCloud 插件市场 打开本插件，点击「使用 HBuilderX 导入插件」，选择你的 uni-app Vue3 工程即可。依赖的 uni-icons、uni-easyinput、uni-pagination、uni-load-more 会随 uni_modules 依赖自动安装。

要求 HBuilderX 3.6.0 及以上。

主题变量（必看）

组件的颜色、圆角、控件高度通过 CSS 变量取值。请在 App.vue 引入随包提供的默认浅色主题，否则这些变量无定义、配色会失效：

<style>
@import '@/uni_modules/candysweet-cadt-ui/common/theme.css';
</style>

也可以不引入，而在你自己的全局样式中按需重写同名变量做品牌定制（如 --color-primary、--color-border、--field-height 等，完整清单见 common/theme.css）。

快速上手

<template>
  <!-- 弹层选择器：触发框 + 底部选项弹层，v-model 绑定选中值 -->
  <cadt-picker
    v-model="value"
    :localdata="options"
    placeholder="请选择"
    popup-title="请选择"
  />

  <!-- 确认弹层 -->
  <cadt-modal v-model:show="modalShow" title="提示" content="确认执行此操作？" @confirm="onConfirm" />

  <!-- 数字步进 -->
  <cadt-number-box v-model="count" :min="0" :max="99" />

  <button @tap="modalShow = true">打开确认框</button>
</template>

<script setup>
import {ref} from 'vue'
const value = ref(null)
const modalShow = ref(false)
const count = ref(1)
// 选项为 {text, value}（也支持原始类型数组）
const options = ref([
  {text: '选项一', value: 1},
  {text: '选项二', value: 2},
])
const onConfirm = () => { modalShow.value = false }
</script>

需要更底层的多选/搜索/分组/全选能力时，可直接使用引擎组件 <cadt-select>（:show + :selected-ids + :options，选项为 {id, title}）；<cadt-picker> 即在其之上封装的触发框形态。

物理返回键接入（重要）

普通 uni-app 中只有页面能注册 onBackPress，组件内注册不生效。若希望「打开 cadt-modal / cadt-select 时按物理返回先关弹层、backClosable=false 时拦截返回」，在使用弹层的页面里调用一次：

import {useOverlayBackPress} from '@/uni_modules/candysweet-cadt-ui/common/use-overlay-backpress'

// 页面 setup 中
useOverlayBackPress()

不接入不影响弹层的正常打开与关闭（点遮罩 / 取消 / 确定均可关闭），仅物理返回不会优先关闭弹层。

组件清单

标注「—」的组件暂无独立 README，可参考示例工程 pages/demo/index.vue 与组件源码顶部的 props 定义。

目录结构

candysweet-cadt-ui/
├─ components/cadt-*/      13 个 easycom 组件
├─ common/                 组件公共能力（无项目依赖）
│  ├─ theme.css                 默认浅色主题变量（需在 App.vue 引入）
│  ├─ overlay-stack.js          自绘弹层返回键栈
│  ├─ use-overlay-backpress.js  页面接入返回键的 composable
│  └─ debounce.js               轻量防抖
└─ package.json

License

木兰宽松许可证 第2版（Mulan PSL v2），Copyright © 2026 CaDt-OraSkyC。