wshisbadboy-ui-lib 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +125 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# wshisbadboy-ui-lib
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/wshisbadboy-ui-lib)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
6
|
+
轻量级 Vue 3 组件库，包含 Button、Alert、Message、Collapse 等常用组件。
|
|
7
|
+
|
|
8
|
+
📖 [在线文档与演示](https://wshisbadboy.github.io/UI-vitepress/)
|
|
9
|
+
|
|
10
|
+
## 安装
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install wshisbadboy-ui-lib
|
|
14
|
+
# 或
|
|
15
|
+
pnpm add wshisbadboy-ui-lib
|
|
16
|
+
# 或
|
|
17
|
+
yarn add wshisbadboy-ui-lib
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 快速上手
|
|
21
|
+
|
|
22
|
+
### 全局注册
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import { createApp } from 'vue'
|
|
26
|
+
import UI from 'wshisbadboy-ui-lib'
|
|
27
|
+
import 'wshisbadboy-ui-lib/dist/wshisbadboy-ui-lib.css'
|
|
28
|
+
|
|
29
|
+
const app = createApp(App)
|
|
30
|
+
app.use(UI)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 按需引入
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import { Button, Alert } from 'wshisbadboy-ui-lib'
|
|
37
|
+
import 'wshisbadboy-ui-lib/dist/wshisbadboy-ui-lib.css'
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 在模板中使用
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<template>
|
|
44
|
+
<MyButton variant="primary">点击我</MyButton>
|
|
45
|
+
<MyAlert type="success" title="成功" description="操作已完成" />
|
|
46
|
+
<MyCollapse>
|
|
47
|
+
<MyCollapseItem title="面板标题" name="1">面板内容</MyCollapseItem>
|
|
48
|
+
</MyCollapse>
|
|
49
|
+
</template>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 组件
|
|
53
|
+
|
|
54
|
+
| 组件 | 说明 |
|
|
55
|
+
|------|------|
|
|
56
|
+
| **Button** | 支持 primary / secondary / outline / text 四种变体，small / medium / large 三种尺寸，禁用与加载状态，图标按钮 |
|
|
57
|
+
| **Alert** | 支持 info / success / warning / error 四种类型，可关闭，支持自定义标题、描述和图标插槽 |
|
|
58
|
+
| **Message** | 命令式 API 的全局消息通知，支持 `.success()` / `.error()` / `.info()` / `.warning()` 静态方法，支持纯文本和 VNode 渲染，可自定义显示时长 |
|
|
59
|
+
| **Collapse** | 支持多面板同时展开或手风琴模式，可通过 v-model 双向绑定，支持禁用指定面板和自定义标题 |
|
|
60
|
+
|
|
61
|
+
## API 概览
|
|
62
|
+
|
|
63
|
+
### Button
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<MyButton variant="primary" size="medium" :loading="false" :disabled="false">
|
|
67
|
+
按钮文字
|
|
68
|
+
</MyButton>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
72
|
+
|------|------|--------|------|
|
|
73
|
+
| variant | `'primary' \| 'secondary' \| 'outline' \| 'text'` | `'primary'` | 变体 |
|
|
74
|
+
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
|
|
75
|
+
| disabled | `boolean` | `false` | 是否禁用 |
|
|
76
|
+
| loading | `boolean` | `false` | 加载状态 |
|
|
77
|
+
|
|
78
|
+
### Alert
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<MyAlert type="success" title="成功" description="操作已完成" />
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
85
|
+
|------|------|--------|------|
|
|
86
|
+
| type | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | 提示类型 |
|
|
87
|
+
| title | `string` | `''` | 标题 |
|
|
88
|
+
| description | `string` | `''` | 描述 |
|
|
89
|
+
| closable | `boolean` | `true` | 是否可关闭 |
|
|
90
|
+
| showIcon | `boolean` | `true` | 是否显示图标 |
|
|
91
|
+
|
|
92
|
+
### Message
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
import { Message } from 'wshisbadboy-ui-lib'
|
|
96
|
+
|
|
97
|
+
Message.success('操作成功')
|
|
98
|
+
Message.error('操作失败')
|
|
99
|
+
Message.info('提示信息', 5000) // 显示 5 秒
|
|
100
|
+
Message.warning('警告', 0) // 不自动消失
|
|
101
|
+
|
|
102
|
+
// VNode 渲染
|
|
103
|
+
import { h } from 'vue'
|
|
104
|
+
Message.success(() => h('span', [
|
|
105
|
+
'已删除 ', h('strong', '3'), ' 个文件'
|
|
106
|
+
]))
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Collapse
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<MyCollapse v-model="activeNames" :accordion="true">
|
|
113
|
+
<MyCollapseItem title="标题一" name="1">内容一</MyCollapseItem>
|
|
114
|
+
<MyCollapseItem title="标题二" name="2">内容二</MyCollapseItem>
|
|
115
|
+
</MyCollapse>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
119
|
+
|------|------|--------|------|
|
|
120
|
+
| modelValue | `Array<string \| number>` | `[]` | 展开面板 |
|
|
121
|
+
| accordion | `boolean` | `false` | 手风琴模式 |
|
|
122
|
+
|
|
123
|
+
## 许可
|
|
124
|
+
|
|
125
|
+
MIT
|