ZUI

Vue 3.5 组件库，基于 shadcn-vue (reka-ui) + Tailwind CSS v4 42 组件 + 7 函数式 API · 声明式与命令式双轨制

安装

npm install z_vue3

快速上手

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'z_vue3/style.css'
import { toast, dialog } from 'z_vue3'

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

// 函数式 API — 零模板污染
toast.success('操作成功')
dialog.confirm({ title: '确认删除？', content: '此操作不可撤销' })

<!-- 声明式组件 -->
<template>
  <ZButton variant="destructive" @click="handleDelete">删除</ZButton>
  <ZTable :dataSource="users" :columns="columns" :pagination="{ pageSize: 20 }" />
  <ZPopConfirm title="确认删除？" @confirm="handleDelete">
    <ZButton variant="ghost">删除</ZButton>
  </ZPopConfirm>
</template>

组件一览

| 类别 | 组件 | |------|------| | 基础 | ZButton, ZIcon, ZTag, ZText, ZDivider, ZSwitch, ZCheckbox, ZSpin, ZEmpty | | 数据录入 | ZInput, ZSelect, ZRadioGroup, ZRadioGroupButton, ZRange, ZForm, ZDatePicker, ZUpload | | 数据展示 | ZTable, ZCard, ZList, ZPagination, ZCarousel, ZDateHeatmap | | 导航 | ZMenu, ZMenuSwitch, ZHoverMenu, ZCascadeMenu, ZBreadcrumb | | 反馈 | ZTooltip, ZPopover, ZPopConfirm, ZDropdown, ZTabs, ZScroll | | 交互 | ZMoveDom, ZSetSize, ZTask | | 布局引擎 | ZTree, ZVirtualList, ZWaterfallFlow, ZRowFlow, ZHorizontalFlow, ZFullImageWall |

函数式 API

import { toast, dialog, drawer, rightMenu, notification, ZPopUtils, zContentMenuUtils } from 'z_vue3'

// Toast
toast.success('操作成功')
toast.error('操作失败')
toast.promise(fetch('/api/save'), { loading: '保存中...', success: '已保存', error: '保存失败' })

// Dialog
const confirmed = await dialog.confirm({ title: '确认删除？', content: '此操作不可撤销' })
dialog.alert({ title: '提示', content: '操作已完成' })

// Drawer
drawer.open({ title: '详情', content: '<p>自定义内容</p>' })

// Notification
notification.show({ title: '更新', description: '新版本 0.2.0 可用', type: 'info' })

// Right-Click Menu
rightMenu.open(event, [
  { name: '复制', callback: () => navigator.clipboard.writeText(text) },
  { name: '删除', callback: handleDelete },
])

// PopConfirm (两种调用方式)
zPopConfirmUtils.pop(event, { title: '确认删除？', onConfirm: handleDelete })
createPopConfirm({ title: '确认删除？', onConfirm: handleDelete }) // 独立弹窗

技术栈

| 层 | 选型 | |---|------| | 框架 | Vue 3.5 + TypeScript 5.6 | | 构建 | Vite 6 | | 样式 | Tailwind CSS v4 (oklch) + tw-animate-css | | 组件基座 | shadcn-vue (reka-ui primitives) | | 图标 | @lucide/vue | | Toast | vue-sonner | | Drawer | vaul-vue | | 轮播 | embla-carousel-vue |

许可证

MIT