vue-color-ui 0.0.13 → 0.0.15
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 +173 -5
- package/lib/temp-color-ui.js +159 -165
- package/lib/temp-color-ui.umd.cjs +2 -2
- package/package.json +1 -1
- package/types/pkg/NavBar/index.vue.d.ts +51 -18
package/README.md
CHANGED
|
@@ -1,9 +1,177 @@
|
|
|
1
|
-
# Vue 3 + TypeScript + Vite
|
|
2
1
|
|
|
3
|
-
|
|
2
|
+
# vue-color-ui
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
`vue-color-ui` 是 [ColorUI](https://github.com/weilanwl/ColorUI) 在 uniapp 生态中的 Vue 版本。这个项目是一个临时解决方案，旨在填补原作者更新之前的空白。
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
## 安装
|
|
7
|
+
|
|
8
|
+
使用 npm 安装 `vue-color-ui`：
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install vue-color-ui
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Nuxt 3 快速开始
|
|
15
|
+
|
|
16
|
+
在 Nuxt 3 项目中快速配置 `vue-color-ui`：
|
|
17
|
+
|
|
18
|
+
1. 创建插件文件 `plugins/vue-color-ui.ts`：
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import TempColorUI from "vue-color-ui";
|
|
22
|
+
import "vue-color-ui/lib/style.css";
|
|
23
|
+
import "vue-color-ui/lib/css/main.css";
|
|
24
|
+
import "vue-color-ui/lib/css/animation.css";
|
|
25
|
+
import "vue-color-ui/lib/css/icon.css";
|
|
26
|
+
|
|
27
|
+
export default defineNuxtPlugin((app) => {
|
|
28
|
+
app.vueApp.use(TempColorUI);
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 使用
|
|
33
|
+
|
|
34
|
+
在你的 Vue 组件中，你可以直接使用 `vue-color-ui` 提供的组件。例如：
|
|
35
|
+
|
|
36
|
+
```vue
|
|
37
|
+
<template>
|
|
38
|
+
<TNavBar :items="navItems" />
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script setup>
|
|
42
|
+
const navItems = [
|
|
43
|
+
{ icon: "homefill", label: "首页" },
|
|
44
|
+
{ icon: "similar", label: "分类" },
|
|
45
|
+
{ img: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png", label: "积分" },
|
|
46
|
+
{ icon: "cart", label: "购物车", badge: 99 },
|
|
47
|
+
{ icon: "my", label: "我的" }
|
|
48
|
+
];
|
|
49
|
+
</script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 贡献
|
|
53
|
+
|
|
54
|
+
这个项目是一个临时解决方案，等原作者更新了之后再决定是否继续维护。如果你有任何建议或发现任何问题，欢迎提交 issue 或 pull request。
|
|
55
|
+
|
|
56
|
+
## 许可证
|
|
57
|
+
|
|
58
|
+
[MIT](LICENSE)
|
|
59
|
+
|
|
60
|
+
## TNavBar组件使用文档
|
|
61
|
+
|
|
62
|
+
`TNavBar` 是一个全局注册的组件，用于创建底部或顶部导航栏。该组件支持图标、图片、徽标等多种元素，并允许自定义背景颜色和文本颜色。
|
|
63
|
+
|
|
64
|
+
### 属性
|
|
65
|
+
|
|
66
|
+
| 属性名 | 类型 | 默认值 | 描述 |
|
|
67
|
+
| ------------- | -------------- | ------- | ------------------------------------------------------------ |
|
|
68
|
+
| `bg` | `string` | `white` | 导航栏背景颜色 |
|
|
69
|
+
| `color` | `string` | `gray` | 文本颜色 |
|
|
70
|
+
| `activeColor` | `string` | `red` | 活动项的文本颜色 |
|
|
71
|
+
| `items` | `NavBarItem[]` | `[]` | 导航栏项的数组，每个项包含 `icon`、`img`、`label` 和 `badge` |
|
|
72
|
+
| `isFoot` | `boolean` | `false` | 是否为底部导航栏 |
|
|
73
|
+
| `activeIndex` | `number` | `0` | 当前激活项的索引 |
|
|
74
|
+
| `onItemClick` | `function` | `null` | 点击导航项时的回调函数，接收 `item` 和 `index` 两个参数 |
|
|
75
|
+
|
|
76
|
+
### 示例
|
|
77
|
+
|
|
78
|
+
#### 示例 1: 基本使用
|
|
79
|
+
|
|
80
|
+
```vue
|
|
81
|
+
<template>
|
|
82
|
+
<TNavBar />
|
|
83
|
+
</template>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
#### 示例 2: 自定义导航项
|
|
87
|
+
|
|
88
|
+
```vue
|
|
89
|
+
<template>
|
|
90
|
+
<TNavBar :items="navItems" />
|
|
91
|
+
</template>
|
|
92
|
+
|
|
93
|
+
<script setup>
|
|
94
|
+
const navItems = [
|
|
95
|
+
{ icon: "homefill", label: "首页" },
|
|
96
|
+
{ icon: "similar", label: "分类" },
|
|
97
|
+
{ img: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png", label: "积分" },
|
|
98
|
+
{ icon: "cart", label: "购物车", badge: 99 },
|
|
99
|
+
{ icon: "my", label: "我的" }
|
|
100
|
+
];
|
|
101
|
+
</script>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### 示例 3: 自定义背景颜色和文本颜色
|
|
105
|
+
|
|
106
|
+
```vue
|
|
107
|
+
<template>
|
|
108
|
+
<TNavBar bg="blue" color="white" activeColor="yellow" />
|
|
109
|
+
</template>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
#### 示例 4: 底部导航栏
|
|
113
|
+
|
|
114
|
+
```vue
|
|
115
|
+
<template>
|
|
116
|
+
<TNavBar :isFoot="true" />
|
|
117
|
+
</template>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
#### 示例 5: 带徽标的导航项
|
|
121
|
+
|
|
122
|
+
```vue
|
|
123
|
+
<template>
|
|
124
|
+
<TNavBar :items="navItemsWithBadge" />
|
|
125
|
+
</template>
|
|
126
|
+
|
|
127
|
+
<script setup>
|
|
128
|
+
const navItemsWithBadge = [
|
|
129
|
+
{ icon: "homefill", label: "首页" },
|
|
130
|
+
{ icon: "similar", label: "分类" },
|
|
131
|
+
{ icon: "cart", label: "购物车", badge: 99 },
|
|
132
|
+
{ icon: "my", label: "我的", badge: 5 }
|
|
133
|
+
];
|
|
134
|
+
</script>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
#### 示例 6: 使用回调函数处理点击事件
|
|
138
|
+
|
|
139
|
+
```vue
|
|
140
|
+
<template>
|
|
141
|
+
<TNavBar :items="navItems" :onItemClick="handleItemClick" />
|
|
142
|
+
</template>
|
|
143
|
+
|
|
144
|
+
<script setup>
|
|
145
|
+
const navItems = [
|
|
146
|
+
{ icon: "homefill", label: "首页", path: "/home" },
|
|
147
|
+
{ icon: "similar", label: "分类", path: "/category" },
|
|
148
|
+
{ icon: "discover", label: "刷刷", path: "/discover" },
|
|
149
|
+
{ icon: "edit", label: "报告", path: "/report" },
|
|
150
|
+
{ icon: "my", label: "我的", path: "/profile" }
|
|
151
|
+
];
|
|
152
|
+
|
|
153
|
+
const handleItemClick = (item, index) => {
|
|
154
|
+
console.log("Clicked item:", item, "at index:", index);
|
|
155
|
+
// 处理导航逻辑，例如路由跳转
|
|
156
|
+
};
|
|
157
|
+
</script>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### 属性类型定义
|
|
161
|
+
|
|
162
|
+
#### `ColorName`
|
|
163
|
+
|
|
164
|
+
`ColorName` 是一个字符串类型，用于定义颜色名称。可以是预定义的颜色名称，例如 `red`、`blue`、`gray` 等。
|
|
165
|
+
|
|
166
|
+
#### `NavBarItem`
|
|
167
|
+
|
|
168
|
+
`NavBarItem` 是一个对象类型，包含以下属性：
|
|
169
|
+
|
|
170
|
+
| 属性名 | 类型 | 描述 |
|
|
171
|
+
| ------- | -------- | -------------------- |
|
|
172
|
+
| `icon` | `string` | 图标名称 |
|
|
173
|
+
| `img` | `string` | 图片 URL |
|
|
174
|
+
| `label` | `string` | 导航项标签 |
|
|
175
|
+
| `badge` | `number` | 徽标数字（可选） |
|
|
176
|
+
| `path` | `string` | 导航项对应的路由路径 |
|
|
8
177
|
|
|
9
|
-
- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
|