@tanzhenxing/zxui NPM

ZXUI - 基于 uni-app 的 Vue3 组件库

简介

ZXUI 是一个专为 uni-app 开发的 Vue3 组件库，提供了丰富的 UI 组件，帮助开发者快速构建跨平台应用。组件库采用 Composition API 设计，支持 TypeScript，具有良好的性能和用户体验。

特性

🚀 Vue3 + Composition API - 基于最新的 Vue3 技术栈
📱 跨平台支持 - 支持 H5、小程序、App 等多个平台
🎨 丰富的组件 - 提供 200+ 个高质量组件
💪 TypeScript 支持 - 完整的 TypeScript 类型定义
🎯 按需引入 - 支持组件按需加载，减小包体积
🔧 高度可定制 - 灵活的主题配置和样式定制
📖 完善的文档 - 详细的使用文档和示例代码

安装

npm install @tanzhenxing/zxui

或者使用 yarn：

yarn add @tanzhenxing/zxui

快速开始

全局引入

在 main.js 中引入所有组件：

import { createApp } from 'vue'
import App from './App.vue'
import ZXUI from '@tanzhenxing/zxui'

const app = createApp(App)
app.use(ZXUI)
app.mount('#app')

按需引入

推荐使用按需引入的方式，可以有效减小包体积：

<template>
  <view>
    <zx-button type="primary" @click="handleClick">点击按钮</zx-button>
    <zx-cell title="单元格" value="内容" />
  </view>
</template>

<script setup>
import { ZxButton, ZxCell } from '@tanzhenxing/zxui'

const handleClick = () => {
  console.log('按钮被点击')
}
</script>

组件分类

基础组件

zx-button - 按钮组件
zx-icon - 图标组件
zx-text - 文本组件
zx-image - 图片组件
zx-divider - 分割线组件

布局组件

zx-row / zx-col - 栅格布局
zx-flex - 弹性布局
zx-grid - 宫格布局
zx-space - 间距组件
zx-sticky - 粘性布局

表单组件

zx-input - 输入框
zx-textarea - 多行输入框
zx-checkbox - 复选框
zx-radio - 单选框
zx-switch - 开关
zx-picker - 选择器
zx-date-picker - 日期选择器
zx-upload - 文件上传
zx-form - 表单容器

数据展示

zx-cell - 单元格
zx-list - 列表
zx-table - 表格
zx-tag - 标签
zx-badge - 徽标
zx-progress - 进度条
zx-circle - 环形进度条
zx-statistic - 数值显示
zx-countdown - 倒计时

反馈组件

zx-toast - 轻提示
zx-dialog - 对话框
zx-popup - 弹出层
zx-action-sheet - 动作面板
zx-notify - 消息通知
zx-loading - 加载状态
zx-empty - 空状态
zx-result - 结果页

导航组件

zx-navbar - 导航栏
zx-tabbar - 标签栏
zx-tabs - 标签页
zx-sidebar - 侧边导航
zx-menu - 菜单
zx-breadcrumb - 面包屑
zx-pagination - 分页

业务组件

zx-goods-card - 商品卡片
zx-goods-nav - 商品导航
zx-cart-bar - 购物车栏
zx-address - 地址组件
zx-coupon - 优惠券
zx-invoice - 发票组件
zx-login - 登录组件

AI 组件

zx-ai-bubble - AI 对话气泡
zx-ai-sender - AI 消息发送器
zx-ai-welcome - AI 欢迎页
zx-ai-suggestion - AI 建议组件
zx-ai-prompts - AI 提示词组件

娱乐组件

zx-turntable - 转盘抽奖
zx-scratchcard - 刮刮卡
zx-giftbox - 礼盒组件
zx-dollmachine - 娃娃机
zx-pk - PK 对战

主题定制

ZXUI 支持主题定制，你可以通过 CSS 变量来自定义组件的样式：

:root {
  --zx-primary-color: #007aff;
  --zx-success-color: #4cd964;
  --zx-warning-color: #f0ad4e;
  --zx-danger-color: #dd524d;
  --zx-info-color: #909399;
  --zx-text-color: #303133;
  --zx-border-color: #ebeef5;
  --zx-background-color: #f5f5f5;
}

兼容性

平台	支持版本
H5	现代浏览器
微信小程序	基础库 2.0+
支付宝小程序	基础库 1.0+
百度小程序	基础库 3.0+
字节跳动小程序	基础库 1.0+
QQ小程序	基础库 1.0+
App	Android 4.4+, iOS 9+