@oiij/chrome-tabs 0.0.20 → 0.0.21
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 +212 -48
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,96 +1,260 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @oiij/chrome-tabs
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@oiij/chrome-tabs)
|
|
4
4
|
[](https://github.com/oiij/use/blob/main/packages/chrome-tabs/LICENSE)
|
|
5
5
|
|
|
6
|
-
##
|
|
6
|
+
## 简介
|
|
7
7
|
|
|
8
8
|
Use Chrome-Tabs 是一个仿 Chrome 风格的标签页组件，为 Vue 3 应用提供流畅的标签页管理体验，帮助开发者构建具有类似浏览器标签页功能的应用。
|
|
9
9
|
|
|
10
|
-
##
|
|
10
|
+
## 特点
|
|
11
11
|
|
|
12
|
-
### Chrome 风格设计
|
|
12
|
+
### 🎨 Chrome 风格设计
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
14
|
+
- 🖥️ 还原 Chrome 浏览器标签页外观
|
|
15
|
+
- 🖱️ 支持标签页拖拽排序
|
|
16
|
+
- ✨ 流畅的动画过渡效果
|
|
17
17
|
|
|
18
|
-
### 模块化设计
|
|
18
|
+
### 🧩 模块化设计
|
|
19
19
|
|
|
20
|
-
-
|
|
20
|
+
- 🏗️ 采用模块化架构，组件独立封装
|
|
21
21
|
- 📦 支持按需导入，减小打包体积
|
|
22
|
-
-
|
|
22
|
+
- 📁 清晰的文件结构，易于维护和扩展
|
|
23
23
|
|
|
24
|
-
### 类型安全
|
|
24
|
+
### 🔒 类型安全
|
|
25
25
|
|
|
26
26
|
- 📝 完整的 TypeScript 类型定义
|
|
27
27
|
- 💡 提供准确的类型推断和代码提示
|
|
28
|
-
-
|
|
28
|
+
- ⚡ 支持 Vue 3 的 Composition API 类型系统
|
|
29
29
|
|
|
30
|
-
### 轻量高效
|
|
30
|
+
### 🚀 轻量高效
|
|
31
31
|
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
32
|
+
- 🪶 核心代码精简，无额外依赖
|
|
33
|
+
- ⚡ 优化的性能表现，最小化运行时开销
|
|
34
|
+
- 📉 支持 Tree Shaking，进一步减小打包体积
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
- 📑 支持多标签页管理
|
|
39
|
-
- 🔄 支持标签页切换和关闭
|
|
40
|
-
- ✨ 支持自定义样式和主题
|
|
41
|
-
|
|
42
|
-
## 安装 📥
|
|
43
|
-
|
|
44
|
-
### 使用 pnpm 🐱
|
|
36
|
+
## 安装
|
|
45
37
|
|
|
46
38
|
```bash
|
|
39
|
+
# 使用 pnpm
|
|
47
40
|
pnpm add @oiij/chrome-tabs
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### 使用 npm 📦
|
|
51
41
|
|
|
52
|
-
|
|
42
|
+
# 使用 npm
|
|
53
43
|
npm install @oiij/chrome-tabs
|
|
54
|
-
```
|
|
55
44
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
```bash
|
|
45
|
+
# 使用 yarn
|
|
59
46
|
yarn add @oiij/chrome-tabs
|
|
60
47
|
```
|
|
61
48
|
|
|
62
|
-
##
|
|
49
|
+
## 依赖
|
|
50
|
+
|
|
51
|
+
- `vue`: ^3.0.0
|
|
52
|
+
- `@oiij/css-render`: workspace:\*
|
|
53
|
+
- `@oiij/use`: workspace:\*
|
|
54
|
+
- `colord`: ^2.0.0
|
|
55
|
+
|
|
56
|
+
## 示例
|
|
63
57
|
|
|
64
58
|
### 基础使用
|
|
65
59
|
|
|
66
60
|
```vue
|
|
67
61
|
<script setup>
|
|
68
62
|
import { ChromeTabs } from '@oiij/chrome-tabs'
|
|
63
|
+
import { ref } from 'vue'
|
|
64
|
+
|
|
65
|
+
const value = ref('tab1')
|
|
66
|
+
const options = [
|
|
67
|
+
{ key: 'tab1', label: '标签1' },
|
|
68
|
+
{ key: 'tab2', label: '标签2' },
|
|
69
|
+
{ key: 'tab3', label: '标签3' },
|
|
70
|
+
]
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<template>
|
|
74
|
+
<ChromeTabs v-model:value="value" :options="options" />
|
|
75
|
+
</template>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 可关闭标签页
|
|
79
|
+
|
|
80
|
+
```vue
|
|
81
|
+
<script setup>
|
|
82
|
+
import { ChromeTabs } from '@oiij/chrome-tabs'
|
|
83
|
+
import { reactive, ref } from 'vue'
|
|
84
|
+
|
|
85
|
+
const value = ref('tab1')
|
|
86
|
+
const options = reactive([
|
|
87
|
+
{ key: 'tab1', label: '标签1', closable: true },
|
|
88
|
+
{ key: 'tab2', label: '标签2', closable: true },
|
|
89
|
+
{ key: 'tab3', label: '标签3', closable: true },
|
|
90
|
+
])
|
|
91
|
+
|
|
92
|
+
function onClose(key) {
|
|
93
|
+
const index = options.findIndex(f => f.key === key)
|
|
94
|
+
options.splice(index, 1)
|
|
95
|
+
}
|
|
69
96
|
</script>
|
|
70
97
|
|
|
71
98
|
<template>
|
|
72
|
-
<ChromeTabs />
|
|
99
|
+
<ChromeTabs v-model:value="value" :options="options" @close="onClose" />
|
|
73
100
|
</template>
|
|
74
101
|
```
|
|
75
102
|
|
|
76
|
-
|
|
103
|
+
### 可添加标签页
|
|
77
104
|
|
|
78
|
-
|
|
105
|
+
```vue
|
|
106
|
+
<script setup>
|
|
107
|
+
import { ChromeTabs } from '@oiij/chrome-tabs'
|
|
108
|
+
import { reactive, ref } from 'vue'
|
|
109
|
+
|
|
110
|
+
const value = ref('tab1')
|
|
111
|
+
const options = reactive([
|
|
112
|
+
{ key: 'tab1', label: '标签1', closable: true },
|
|
113
|
+
])
|
|
114
|
+
|
|
115
|
+
function handleAdd() {
|
|
116
|
+
const key = `tab${options.length + 1}`
|
|
117
|
+
options.push({ key, label: key, closable: true })
|
|
118
|
+
value.value = key
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function onClose(key) {
|
|
122
|
+
const index = options.findIndex(f => f.key === key)
|
|
123
|
+
options.splice(index, 1)
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
79
126
|
|
|
80
|
-
|
|
127
|
+
<template>
|
|
128
|
+
<ChromeTabs
|
|
129
|
+
v-model:value="value"
|
|
130
|
+
:options="options"
|
|
131
|
+
addable
|
|
132
|
+
@add="handleAdd"
|
|
133
|
+
@close="onClose"
|
|
134
|
+
/>
|
|
135
|
+
</template>
|
|
136
|
+
```
|
|
81
137
|
|
|
82
|
-
|
|
138
|
+
### 自定义颜色
|
|
83
139
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
140
|
+
```vue
|
|
141
|
+
<script setup>
|
|
142
|
+
import { ChromeTabs } from '@oiij/chrome-tabs'
|
|
143
|
+
import { ref } from 'vue'
|
|
144
|
+
|
|
145
|
+
const value = ref('tab1')
|
|
146
|
+
const options = [
|
|
147
|
+
{ key: 'tab1', label: '标签1' },
|
|
148
|
+
{ key: 'tab2', label: '标签2' },
|
|
149
|
+
]
|
|
150
|
+
const colors = {
|
|
151
|
+
background: '#E8F5E9',
|
|
152
|
+
active: '#C8E6C9',
|
|
153
|
+
primary: '#4CAF50',
|
|
154
|
+
}
|
|
155
|
+
</script>
|
|
89
156
|
|
|
90
|
-
|
|
157
|
+
<template>
|
|
158
|
+
<ChromeTabs v-model:value="value" :options="options" :colors="colors" />
|
|
159
|
+
</template>
|
|
160
|
+
```
|
|
91
161
|
|
|
92
|
-
|
|
162
|
+
## API
|
|
163
|
+
|
|
164
|
+
### `<ChromeTabs />`
|
|
165
|
+
|
|
166
|
+
Chrome 标签页组件。
|
|
167
|
+
|
|
168
|
+
#### Props
|
|
169
|
+
|
|
170
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
171
|
+
| -------------- | ------------------------- | ------- | ------------------ |
|
|
172
|
+
| `value` | `TabItemKey` | - | 当前激活的标签页键 |
|
|
173
|
+
| `options` | `TabsOption[]` | `[]` | 标签页选项配置 |
|
|
174
|
+
| `colors` | `object` | - | 颜色配置 |
|
|
175
|
+
| `dropdown` | `boolean` | `false` | 是否显示下拉菜单 |
|
|
176
|
+
| `addable` | `boolean` | `false` | 是否可添加标签页 |
|
|
177
|
+
| `loadingValue` | `TabItemKey` | - | 加载中的标签页键 |
|
|
178
|
+
| `iconSize` | `number` | `20` | 图标大小 |
|
|
179
|
+
| `contentClass` | `string` | - | 内容区域类名 |
|
|
180
|
+
| `contentStyle` | `CSSProperties \| string` | - | 内容区域样式 |
|
|
181
|
+
|
|
182
|
+
#### Events
|
|
183
|
+
|
|
184
|
+
| 事件 | 参数 | 说明 |
|
|
185
|
+
| -------------- | ---------------------------------- | -------------------- |
|
|
186
|
+
| `update:value` | `(value: TabItemKey)` | 激活标签页变化时触发 |
|
|
187
|
+
| `click` | `(key: TabItemKey, index: number)` | 点击标签页时触发 |
|
|
188
|
+
| `contextmenu` | `(key: TabItemKey, index: number)` | 右键点击标签页时触发 |
|
|
189
|
+
| `close` | `(key: TabItemKey, index: number)` | 关闭标签页时触发 |
|
|
190
|
+
| `add` | - | 点击添加按钮时触发 |
|
|
191
|
+
|
|
192
|
+
#### Slots
|
|
193
|
+
|
|
194
|
+
| 插槽 | 说明 |
|
|
195
|
+
| -------- | -------- |
|
|
196
|
+
| `prefix` | 前缀内容 |
|
|
197
|
+
| `suffix` | 后缀内容 |
|
|
198
|
+
|
|
199
|
+
### `<ChromeTabItem />`
|
|
200
|
+
|
|
201
|
+
Chrome 标签页项组件。
|
|
202
|
+
|
|
203
|
+
#### Props
|
|
204
|
+
|
|
205
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
206
|
+
| ------------- | --------------------- | ------- | ---------- |
|
|
207
|
+
| `itemKey` | `TabItemKey` | - | 标签页键 |
|
|
208
|
+
| `itemIndex` | `number` | - | 标签页索引 |
|
|
209
|
+
| `activeIndex` | `number` | `0` | 激活索引 |
|
|
210
|
+
| `label` | `string \| function` | - | 标签页标题 |
|
|
211
|
+
| `icon` | `function` | - | 标签页图标 |
|
|
212
|
+
| `closable` | `boolean \| function` | `false` | 是否可关闭 |
|
|
213
|
+
| `disabled` | `boolean \| function` | `false` | 是否禁用 |
|
|
214
|
+
| `loading` | `boolean \| function` | `false` | 是否加载中 |
|
|
215
|
+
| `loadingIcon` | `function` | - | 加载图标 |
|
|
216
|
+
| `iconSize` | `number` | `20` | 图标大小 |
|
|
217
|
+
|
|
218
|
+
## 类型定义
|
|
219
|
+
|
|
220
|
+
```ts
|
|
221
|
+
import type { CSSProperties, VNode } from 'vue'
|
|
222
|
+
|
|
223
|
+
type VNodeChild = VNode | string | number | undefined | void | null | boolean
|
|
224
|
+
type TabItemKey = string | number
|
|
225
|
+
|
|
226
|
+
export type TabsOption = {
|
|
227
|
+
key: TabItemKey
|
|
228
|
+
label: string | ((key: TabItemKey, index: number) => VNodeChild)
|
|
229
|
+
icon?: (key: TabItemKey, index: number) => VNodeChild
|
|
230
|
+
closable?: boolean | ((key: TabItemKey, index: number) => boolean)
|
|
231
|
+
disabled?: boolean | ((key: TabItemKey, index: number) => boolean)
|
|
232
|
+
loading?: boolean | ((key: TabItemKey, index: number) => boolean)
|
|
233
|
+
loadingIcon?: (key: TabItemKey, index: number) => VNodeChild
|
|
234
|
+
onClick?: (key: TabItemKey, index: number, ev: MouseEvent) => void
|
|
235
|
+
onContextMenu?: (key: TabItemKey, index: number, ev: MouseEvent) => void
|
|
236
|
+
onClose?: (key: TabItemKey, index: number, ev: MouseEvent) => void
|
|
237
|
+
class?: string
|
|
238
|
+
style?: CSSProperties | string
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
export type TabsProps = {
|
|
242
|
+
value?: TabItemKey
|
|
243
|
+
colors?: {
|
|
244
|
+
active?: string
|
|
245
|
+
primary?: string
|
|
246
|
+
background?: string
|
|
247
|
+
}
|
|
248
|
+
dropdown?: boolean
|
|
249
|
+
addable?: boolean
|
|
250
|
+
options?: TabsOption[]
|
|
251
|
+
loadingValue?: TabItemKey
|
|
252
|
+
iconSize?: number
|
|
253
|
+
contentClass?: string
|
|
254
|
+
contentStyle?: CSSProperties | string
|
|
255
|
+
}
|
|
256
|
+
```
|
|
93
257
|
|
|
94
|
-
##
|
|
258
|
+
## 在线文档
|
|
95
259
|
|
|
96
|
-
|
|
260
|
+
[在线文档](https://oiij-use.vercel.app/chrome-tabs/chrome-tabs)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oiij/chrome-tabs",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.21",
|
|
5
5
|
"description": "A Vue Component Likes Chrome Tabs Style.",
|
|
6
6
|
"author": "oiij",
|
|
7
7
|
"license": "MIT",
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"colord": "^2.9.3",
|
|
30
30
|
"vue": "^3.5.30",
|
|
31
|
-
"@oiij/css-render": "0.0.
|
|
32
|
-
"@oiij/use": "0.0.
|
|
31
|
+
"@oiij/css-render": "0.0.13",
|
|
32
|
+
"@oiij/use": "0.0.51"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"colord": "^2.9.3",
|
|
36
36
|
"vue": "^3.5.30",
|
|
37
|
-
"@oiij/css-render": "0.0.
|
|
38
|
-
"@oiij/use": "0.0.
|
|
37
|
+
"@oiij/css-render": "0.0.13",
|
|
38
|
+
"@oiij/use": "0.0.51"
|
|
39
39
|
},
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|