更新记录

1.0.1（2026-09-17） 下载此版本

新增暗黑模式适配（@media prefers-color-scheme: dark）

1.0.0（2026-09-17） 下载此版本

• 首次发布
• 基于 page-container 的全屏标签选择弹窗，支持单选/多选、关键字本地搜索
• id 兼容数字与字符串（统一转字符串比较）
• 支持嵌套在其他弹窗之上

平台兼容性

uni-app x(5.24)

其他

tag-select-popup 标签选择弹窗

uni-app x 全屏标签选择弹窗，基于 page-container 实现，支持单选/多选、关键字本地搜索，id 兼容数字与字符串，可嵌套在其他弹窗之上。

安装

将插件目录放入项目 uni_modules 目录，easycom 自动识别，无需手动引入：

uni_modules/tag-select-popup

使用

<tag-select-popup
  v-if="isShowSelect"
  :tag="selectTag"
  :selectedValue="selectedId"
  @confirm="onConfirm"
  @close="isShowSelect = false"
/>

const selectTag = ref<UTSJSONObject>({
  name: "标签",
  is_checkbox: 0, // 1 多选，0 单选
  value: [
    { id: "1_abc", name: "选项A" },
    { id: 2, name: "选项B" }
  ]
})
const onConfirm = (selected: any) => {
  // 单选：emit(id)，未选 emit(0)
  // 多选：emit(id[])
}

Props

• tag.name：弹窗标题
• tag.is_checkbox：1 多选，0 单选
• tag.value：选项列表 Array<{ id: number|string, name: string }>，id 数字、字符串均可

Events

暗黑模式

已适配暗黑模式（@media (prefers-color-scheme: dark)）。使用前提：

• Web / 微信小程序平台：需在 manifest.json 的 web / mp-weixin 节点配置 "darkmode": true
• App 平台蒸汽模式：需 HBuilderX 5.25+，且 manifest.json 配置 "darkmode": true

注意

• 组件依赖 iconfont 字体，需项目内配置包含以下码点的字体：\ue628 关闭、\ue640 搜索、\ue61d 选中、\ue629 未选；码点不同时请修改模板中对应字符。
• 建议父组件用 v-if 控制组件创建/销毁，close 事件触发时置为 false。