qy-design

基于 TDesign Vue Next 深度封装的企业级 Vue3 组件库。

安装

# pnpm
pnpm add qy-design tdesign-vue-next vue

# npm
npm install qy-design tdesign-vue-next vue

快速上手

1. 全量引入

在 main.ts 中全量引入组件库及其核心样式：

import { createApp } from 'vue'
import App from './App.vue'

// 引入 TDesign 基础样式
import 'tdesign-vue-next/es/style/index.css'
// 引入 QyDesign 组件库及全量注册
import QUI from '@qy-design/components'

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

2. 按需引入

<template>
  <qy-button theme="primary">按钮</qy-button>
  <qy-pagination v-model:current-page="page" :total="100" />
</template>

<script setup lang="ts">
import { QyButton, QyPagination } from '@qy-design/components'
import '@qy-design/components/style'
</script>

组件清单

• 通用: QyButton, QyTextButtons, QyDescription, QyHScrollBox, QyScrollbar, QyTitle, QyDialog, QyDrawer, QyStatusTag, QyTree, QyContextMenu, QyPagination
• 高级: QyTablePlus, QyVideoPlayer, QyWatermark, QySplitPane, QyUpload, QyGuide, QyBookReader, QySignature

License

MIT