z_vue3

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>

组件一览

函数式 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 }) // 独立弹窗

技术栈

许可证

MIT