更新记录

0.1.0（2026-06-01） 下载此版本

首次发布 I UI X 组件库，包含基础、表单、数据、反馈、布局、导航和其他扩展组件，并提供演示页面与 API 文档。

平台兼容性

uni-app x(3.7.8)

I UI X 插件使用说明

i-ui-x 是一套面向 uni-app x 的 uni_modules 组件插件，组件源码位于 src/uni_modules/i-ui-x。插件使用 .uvue 单文件组件开发，适合 Vue 3 / UniAppX 项目通过 easycom 方式直接使用。

安装方式

方式一：通过插件市场导入

在 DCloud 插件市场导入插件后，确认项目中存在以下目录：

uni_modules/i-ui-x

如果项目根目录是标准 uni-app x 项目，HBuilderX 会自动识别 uni_modules 中的组件。

方式二：手动复制

将插件目录复制到目标项目的 uni_modules 下：

your-project/
  uni_modules/
    i-ui-x/
      components/
      package.json
      readme.md
      changelog.md

复制后建议重新运行或重新编译项目，确保 easycom 组件被重新扫描。

基础使用

插件组件统一使用 i- 前缀。多数场景不需要手动 import，直接在页面或组件中使用即可。

<template>
  <view class="page">
    <i-button type="primary" text="确认"></i-button>
    <i-alert
      type="success"
      title="操作成功"
      description="组件已经正常加载"
    ></i-alert>
  </view>
</template>

如果你的项目关闭了 easycom 自动扫描，需要在 pages.json 或项目配置中手动配置 easycom 规则。

常用示例

按钮

<template>
  <i-button
    type="primary"
    shape="round"
    text="提交"
    @click="onSubmit"
  ></i-button>
</template>

<script setup>
function onSubmit() {
  uni.showToast({
    title: "已提交",
    icon: "none"
  })
}
</script>

表单输入

<template>
  <i-input
    v-model="username"
    placeholder="请输入用户名"
    clearable
    border
  ></i-input>
</template>

<script setup>
import { ref } from "vue"

const username = ref("")
</script>

选择器

<template>
  <i-select
    v-model="city"
    label="城市"
    :options="cityOptions"
    clearable
    @change="onCityChange"
  ></i-select>
</template>

<script setup>
import { ref } from "vue"

const city = ref("")
const cityOptions = [
  { label: "北京", value: "beijing" },
  { label: "上海", value: "shanghai" },
  { label: "深圳", value: "shenzhen" }
]

function onCityChange(event) {
  console.log("city change", event)
}
</script>

弹出层

<template>
  <i-button text="打开弹出层" @click="show = true"></i-button>

  <i-popup
    v-model:show="show"
    position="bottom"
    title="弹出层"
    closeable
  >
    <view class="popup-content">
      <text>这里是弹出层内容</text>
    </view>
  </i-popup>
</template>

<script setup>
import { ref } from "vue"

const show = ref(false)
</script>

二维码

<template>
  <i-qrcode
    value="https://uniapp.dcloud.net.cn/"
    :size="180"
    level="M"
    logo="/static/logo.png"
    logoSize="50px"
  ></i-qrcode>
</template>

组件分类

当前插件包含以下类型组件：

• 基础组件：颜色、图标、图片、按钮、文本、布局、单元格、徽标、标签、加载等。
• 表单组件：表单、日历、键盘、级联、选择器、日期时间选择器、颜色选择器、搜索、输入框、上传、单选、多选、开关、滑块等。
• 数据组件：进度、金额、表格、倒计时、数字滚动等。
• 反馈组件：气泡、操作菜单、提示、通知、滑动单元格、折叠面板、弹出层、模态框、幕帘、浮动面板等。
• 布局组件：分割线、间隔、安全底部、卡片、区域标题、骨架屏、吸顶、宫格、列表、瀑布流、空状态等。
• 导航组件：导航栏、标签栏、Tabs、分段器、索引列表、侧边菜单、步骤条、下拉菜单、悬浮按钮、分页、返回顶部、链接等。
• 其他组件：签名、验证码输入、二维码、图片裁剪、轮播、头像、展开阅读、水印、加载更多等。

Demo 与 API 文档

本项目内置了完整演示页面。每个组件 demo 都包含：

• 效果演示：展示典型使用场景。
• Props 调试：修改 props 后实时查看效果。
• API：展示 Props、Events、Slots、Methods。

在当前项目中运行 H5 预览：

npm run dev:h5 -- --host 127.0.0.1

构建验证：

npm run build:h5

兼容性

插件面向 uni-app x / Vue 3 项目：

• HBuilderX：建议 4.66 或以上。
• Vue：仅支持 Vue 3。
• H5：Chrome 88+，Safari 13+。
• App Android：建议 Android API 27+。
• App iOS：建议 iOS 14+。
• 小程序：当前以微信小程序为主要适配目标。

实际兼容性以 DCloud uni-app x 当前版本和目标平台编译结果为准。

注意事项

• 插件不依赖 Pinia、Vant、第三方状态管理或 UI 框架。
• 组件以 UniAppX 内置组件和 .uvue 能力实现，不建议直接按普通 Vue Web 组件方式改造。
• 颜色、弹层、手势、滚动类组件在不同平台可能存在细节差异，发布前建议在目标平台分别验证。
• 图标组件默认使用 Remix Icon 字体能力；小程序环境下请确认网络字体或静态资源路径可访问。
• 如果复制插件目录后组件没有生效，先重启 dev server 或 HBuilderX，再确认 uni_modules/i-ui-x/components 目录结构是否完整。

发布信息

• 插件 ID：i-ui-x
• 当前版本：0.1.0
• 授权协议：MIT
• 数据收集：不收集用户数据
• 权限申请：无特殊权限
• 广告：无