x-vue3-ui

基于 Vue 3 + TypeScript 的 UI 组件库，从 x-vue-ui (Vue 2) 迁移而来。

特性

• 🚀 Vue 3 Composition API
• 📘 TypeScript 支持
• 🎨 保持原组件 API 设计
• 📦 支持按需引入
• 🔧 完整的类型定义

安装

npm install x-vue3-ui
# 或
yarn add x-vue3-ui
# 或
pnpm add x-vue3-ui

使用

全局注册

import { createApp } from 'vue'
import XVueUI from 'x-vue3-ui'
import 'x-vue3-ui/dist/style.css'

const app = createApp(App)
app.use(XVueUI)

按需引入

<template>
  <XButton type="primary">按钮</XButton>
  <XStarBar v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XButton, XStarBar } from 'x-vue3-ui'
import 'x-vue3-ui/dist/style.css'

const value = ref(3)
</script>

方法调用

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const $message = instance?.appContext.config.globalProperties.$message
const $toast = instance?.appContext.config.globalProperties.$toast

// 使用
$message?.success('成功消息')
$toast?.('提示信息')

组件列表

| 组件名 | 说明 | |--------|------| | XAudio | 音频播放器 | | XBackTop | 返回顶部 | | XBattery | 电池电量显示 | | XBook | 翻书效果 | | XButton | 按钮 | | XButtonGroup | 按钮组 | | XCountUp | 数字滚动 | | XCountdown | 倒计时 | | XCurvedText | 曲线文字 | | XDrag | 拖拽容器 | | XDragItem | 拖拽项 | | XDrawBoard | 画板 | | XIdleDetector | 空闲检测 | | XImageCompare | 图片对比 | | XImageEffect | 图片效果 | | XImageUpload | 图片上传 | | XImageViewer | 图片查看器 | | XLoading | 加载中 | | XMessage | 全局消息 | | XModal | 弹窗 | | XScoreBar | 分数条 | | XScreenLock | 锁屏 | | XScreenshot | 截图工具 | | XShareBar | 分享栏 | | XSignature | 签名板 | | XSliderValidate | 滑块验证 | | XStarBar | 星级评分 | | XTab | 标签页 | | XTabGroup | 标签组 | | XToast | 轻提示 | | XVideo | 视频播放器 | | XVideoMonitor | 视频监控 | | XVideoRecord | 视频录制 | | XWatermark | 水印 |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

与原 Vue 2 版本的区别

1. Composition API: 使用 <script setup> 语法
2. 类型定义: 完整的 TypeScript 类型支持
3. 全局属性: this.$message -> getCurrentInstance()?.appContext.config.globalProperties.$message
4. 事件: 使用 emit 函数替代 this.$emit
5. 响应式: 使用 ref/reactive 替代 data

License

MIT