Appearance
说明文档
Hidden Title
重要声明
组件库目前仍在持续建设和完善中，部分组件可能存在缺陷、API 设计不够合理、功能覆盖不完整，或需要进一步优化升级的情况。
如果各位同事在使用过程中发现 Bug、API 使用不便或不合理、功能缺失或有更好的改进建议，请及时沟通和反馈。每一次真实使用中的问题与建议，都会帮助我们持续完善组件库、提升组件质量，让大家获得更加稳定、高效、顺畅的开发体验。
欢迎大家共同参与建设，让组件库在实际项目中不断成长、越来越好用。
提示
- sybz-components 是基于 Vue3 + Element-plus + 部分原生js组件 再次封装的基础组件, 适用于前端项目开发
- @sybz-components/utils是工作中常用的封装的函数库组件
- @sybz-components/portal-dev用户快速登录门户
安装
使用包管理器 推荐
建议您使用包管理器 (pnpm推荐、bun、npm、yarn) 安装 sybz-components。
sh
pnpm add sybz-components -Spnpm add sybz-components -Ssh
bun add sybz-componentsbun add sybz-componentssh
npm install sybz-components -Snpm install sybz-components -Ssh
yarn add sybz-componentsyarn add sybz-components使用
前提条件：使用项目必须注册 Element-plus组件库, 否则样式不生效
js
// main.ts
import App from './App.vue'
const app = createApp(App)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SybzComponents from 'sybz-components'
import 'sybz-components/style.css'
app.use(ElementPlus).use(SybzComponents).mount('#app')// main.ts
import App from './App.vue'
const app = createApp(App)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SybzComponents from 'sybz-components'
import 'sybz-components/style.css'
app.use(ElementPlus).use(SybzComponents).mount('#app')安装函数库方法
首先安装@sybz-components/utils
sh
pnpm add @sybz-components/utils -Spnpm add @sybz-components/utils -Ssh
bun add @sybz-components/utilsbun add @sybz-components/utilssh
npm install @sybz-components/utils -Snpm install @sybz-components/utils -Ssh
yarn add @sybz-components/utilsyarn add @sybz-components/utilsjs
// 将sybz-components下的公共函数赋值到全局
import * as utils from '@sybz-components/utils'
Object.keys(utils).forEach((v) => {
app.config.globalProperties[v] = utils[v]
})
proxy.$toast('全局提示')
// 按需引入
import { $toast } from '@sybz-components/utils'
$toast('我是成功提示')
$toast('我是失败提示', 'e')// 将sybz-components下的公共函数赋值到全局
import * as utils from '@sybz-components/utils'
Object.keys(utils).forEach((v) => {
app.config.globalProperties[v] = utils[v]
})
proxy.$toast('全局提示')
// 按需引入
import { $toast } from '@sybz-components/utils'
$toast('我是成功提示')
$toast('我是失败提示', 'e')升级包(由于sybz-components依赖@ysbz-components/utils, 请务必保证把这两个包同时升级)
sh
pnpm add sybz-components@latest @sybz-components/utils@latestpnpm add sybz-components@latest @sybz-components/utils@latestsh
bun add sybz-components@latest @sybz-components/utils@latestbun add sybz-components@latest @sybz-components/utils@latestsh
npm install sybz-components@latest @sybz-components/utils@latestnpm install sybz-components@latest @sybz-components/utils@latestsh
yarn add sybz-components@latest @sybz-components/utils@latestyarn add sybz-components@latest @sybz-components/utils@latest自定义指令
不必注册, 直接使用
v-copy
v-number
v-focusv-copy
v-number
v-focusHooks
Hooks 是基于 Vue 组合式 API 的公共状态和生命周期封装，已经从 sybz-components 主包导出。
ts
import { useLoading, usePagination } from 'sybz-components'import { useLoading, usePagination } from 'sybz-components'只想单独表达使用 hooks 时，也可以从 hooks 子路径引入：
ts
import { useLoading, usePagination } from 'sybz-components/hooks'import { useLoading, usePagination } from 'sybz-components/hooks'完整示例见 Hooks 总览。
docs文档结构目录
├─ examples # VPDemo组件自动解析此文件夹下的所有.vue文件
├─ components # .md文件
├─ public # 静态资源文件
├─ .vitepress
│ ├─ config # 插件配置
| │ ├─ global.ts # 全局变量定义
| │ └─ plugins.ts # 自定义.md文件渲染
│ ├─ theme # 主题配置
│ ├─ utils # 文档展开隐藏代码高亮
│ ├─ vitepress
| │ ├─ vp-demo # VPDemo组件源码
| │ ├─ style # VPDemo组件样式
| │ └─ index.ts # 暴露VPDemo组件
│ └─ config.ts # vitepress配置文件
├─ index.md # 文档home页面
├─ tsconfig.json # typescript 全局配置
└─ vite.config.ts # vite 全局配置文件（支持tsx）├─ examples # VPDemo组件自动解析此文件夹下的所有.vue文件
├─ components # .md文件
├─ public # 静态资源文件
├─ .vitepress
│ ├─ config # 插件配置
| │ ├─ global.ts # 全局变量定义
| │ └─ plugins.ts # 自定义.md文件渲染
│ ├─ theme # 主题配置
│ ├─ utils # 文档展开隐藏代码高亮
│ ├─ vitepress
| │ ├─ vp-demo # VPDemo组件源码
| │ ├─ style # VPDemo组件样式
| │ └─ index.ts # 暴露VPDemo组件
│ └─ config.ts # vitepress配置文件
├─ index.md # 文档home页面
├─ tsconfig.json # typescript 全局配置
└─ vite.config.ts # vite 全局配置文件（支持tsx）说明
- 本页用于介绍组件库安装方式、基础接入方式和文档目录结构。