Appearance
说明文档
Hidden Title
提示
- sybz-components 是基于 Vue3 + Element-plus + 部分原生js组件 再次封装的基础组件, 适用于前端项目开发
- @sybz-components/utils是工作中常用的封装的函数库组件
- sybz-components全局注册了@element-plus/icons-vue的icon, 使用方式
el-icon-xxx
安装
使用包管理器 推荐
建议您使用包管理器 (pnpm推荐 ， yarn，npm) 安装 sybz-components。
sh
pnpm add sybz-components -Spnpm add sybz-components -Ssh
yarn add sybz-componentsyarn add sybz-componentssh
npm install sybz-components -Snpm install sybz-components -S使用
前提条件：使用项目必须注册 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
yarn add @sybz-components/utilsyarn add @sybz-components/utilssh
npm install @sybz-components/utils -Snpm install @sybz-components/utils -Sjs
// 将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')升级包
javascript
pnpm add sybz-components@latest && pnpm add @sybz-components/utils@latestpnpm add sybz-components@latest && pnpm add @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）说明
- 本页用于介绍组件库安装方式、基础接入方式和文档目录结构。