@ebfe/vantkit-doc 0.0.2 → 0.0.4
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/es/index.d.ts +7 -0
- package/es/index.js +3 -7
- package/lib/@ebfe/vant-kit.cjs.js +20 -0
- package/lib/@ebfe/vant-kit.es.js +16 -0
- package/lib/@ebfe/vant-kit.js +29 -0
- package/lib/@ebfe/vant-kit.min.js +20 -0
- package/lib/index.css +0 -0
- package/lib/index.d.ts +7 -0
- package/lib/index.js +28 -7
- package/lib/web-types.json +284 -0
- package/package.json +2 -2
- package/es/coloring-avatar/README.md +0 -110
- package/es/date-picker/README.md +0 -248
- package/es/date-range-picker/README.md +0 -369
- package/es/field-date-picker/README.md +0 -101
- package/es/field-date-range-picker/README.md +0 -134
- package/es/field-mask-txt/README.md +0 -281
- package/es/field-multi-picker/README.md +0 -115
- package/es/field-single-picker/README.md +0 -107
- package/es/mask-txt/README.md +0 -214
- package/es/multi-picker/README.md +0 -183
- package/es/single-picker/README.md +0 -239
- package/lib/coloring-avatar/README.md +0 -110
- package/lib/date-picker/README.md +0 -248
- package/lib/date-range-picker/README.md +0 -369
- package/lib/field-date-picker/README.md +0 -101
- package/lib/field-date-range-picker/README.md +0 -134
- package/lib/field-mask-txt/README.md +0 -281
- package/lib/field-multi-picker/README.md +0 -115
- package/lib/field-single-picker/README.md +0 -107
- package/lib/mask-txt/README.md +0 -214
- package/lib/multi-picker/README.md +0 -183
- package/lib/single-picker/README.md +0 -239
package/es/index.d.ts
ADDED
package/es/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
const version = '0.0.
|
|
2
|
-
|
|
1
|
+
const version = '0.0.2';
|
|
3
2
|
function install(app) {
|
|
4
3
|
const components = [];
|
|
5
|
-
|
|
6
4
|
components.forEach((item) => {
|
|
7
5
|
if (item.install) {
|
|
8
6
|
app.use(item);
|
|
@@ -11,10 +9,8 @@ function install(app) {
|
|
|
11
9
|
}
|
|
12
10
|
});
|
|
13
11
|
}
|
|
14
|
-
|
|
15
|
-
export { install, version };
|
|
16
|
-
|
|
17
|
-
export default {
|
|
12
|
+
var stdin_default = {
|
|
18
13
|
install,
|
|
19
14
|
version,
|
|
20
15
|
};
|
|
16
|
+
export { stdin_default as default, install, version };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
3
|
+
const version = '0.0.2';
|
|
4
|
+
function install(app) {
|
|
5
|
+
const components = [];
|
|
6
|
+
components.forEach((item) => {
|
|
7
|
+
if (item.install) {
|
|
8
|
+
app.use(item);
|
|
9
|
+
} else if (item.name) {
|
|
10
|
+
app.component(item.name, item);
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
var stdin_default = {
|
|
15
|
+
install,
|
|
16
|
+
version,
|
|
17
|
+
};
|
|
18
|
+
exports.default = stdin_default;
|
|
19
|
+
exports.install = install;
|
|
20
|
+
exports.version = version;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const version = '0.0.2';
|
|
2
|
+
function install(app) {
|
|
3
|
+
const components = [];
|
|
4
|
+
components.forEach((item) => {
|
|
5
|
+
if (item.install) {
|
|
6
|
+
app.use(item);
|
|
7
|
+
} else if (item.name) {
|
|
8
|
+
app.component(item.name, item);
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
var stdin_default = {
|
|
13
|
+
install,
|
|
14
|
+
version,
|
|
15
|
+
};
|
|
16
|
+
export { stdin_default as default, install, version };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined'
|
|
3
|
+
? factory(exports)
|
|
4
|
+
: typeof define === 'function' && define.amd
|
|
5
|
+
? define(['exports'], factory)
|
|
6
|
+
: ((global = typeof globalThis !== 'undefined' ? globalThis : global || self),
|
|
7
|
+
factory((global['@ebfe/vant-kit'] = {})));
|
|
8
|
+
})(this, function (exports2) {
|
|
9
|
+
'use strict';
|
|
10
|
+
const version = '0.0.2';
|
|
11
|
+
function install(app) {
|
|
12
|
+
const components = [];
|
|
13
|
+
components.forEach((item) => {
|
|
14
|
+
if (item.install) {
|
|
15
|
+
app.use(item);
|
|
16
|
+
} else if (item.name) {
|
|
17
|
+
app.component(item.name, item);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
var stdin_default = {
|
|
22
|
+
install,
|
|
23
|
+
version,
|
|
24
|
+
};
|
|
25
|
+
exports2.default = stdin_default;
|
|
26
|
+
exports2.install = install;
|
|
27
|
+
exports2.version = version;
|
|
28
|
+
Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
29
|
+
});
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
!(function (e, n) {
|
|
2
|
+
'object' == typeof exports && 'undefined' != typeof module
|
|
3
|
+
? n(exports)
|
|
4
|
+
: 'function' == typeof define && define.amd
|
|
5
|
+
? define(['exports'], n)
|
|
6
|
+
: n(((e = 'undefined' != typeof globalThis ? globalThis : e || self)['@ebfe/vant-kit'] = {}));
|
|
7
|
+
})(this, function (e) {
|
|
8
|
+
'use strict';
|
|
9
|
+
const n = '0.0.2';
|
|
10
|
+
function t(e) {
|
|
11
|
+
[].forEach((n) => {
|
|
12
|
+
n.install ? e.use(n) : n.name && e.component(n.name, n);
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
var o = { install: t, version: n };
|
|
16
|
+
((e.default = o),
|
|
17
|
+
(e.install = t),
|
|
18
|
+
(e.version = n),
|
|
19
|
+
Object.defineProperties(e, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: 'Module' } }));
|
|
20
|
+
});
|
package/lib/index.css
ADDED
|
File without changes
|
package/lib/index.d.ts
ADDED
package/lib/index.js
CHANGED
|
@@ -1,8 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all) __defProp(target, name, { get: all[name], enumerable: true });
|
|
7
|
+
};
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if ((from && typeof from === 'object') || typeof from === 'function') {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, {
|
|
13
|
+
get: () => from[key],
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, '__esModule', { value: true }), mod);
|
|
20
|
+
var stdin_exports = {};
|
|
21
|
+
__export(stdin_exports, {
|
|
22
|
+
default: () => stdin_default,
|
|
23
|
+
install: () => install,
|
|
24
|
+
version: () => version,
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
27
|
+
const version = '0.0.2';
|
|
3
28
|
function install(app) {
|
|
4
29
|
const components = [];
|
|
5
|
-
|
|
6
30
|
components.forEach((item) => {
|
|
7
31
|
if (item.install) {
|
|
8
32
|
app.use(item);
|
|
@@ -11,10 +35,7 @@ function install(app) {
|
|
|
11
35
|
}
|
|
12
36
|
});
|
|
13
37
|
}
|
|
14
|
-
|
|
15
|
-
export { install, version };
|
|
16
|
-
|
|
17
|
-
export default {
|
|
38
|
+
var stdin_default = {
|
|
18
39
|
install,
|
|
19
40
|
version,
|
|
20
41
|
};
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
|
+
"framework": "vue",
|
|
4
|
+
"name": "@ebfe/vant-kit",
|
|
5
|
+
"version": "0.0.2",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"tags": [
|
|
9
|
+
{
|
|
10
|
+
"name": "coloring-avatar",
|
|
11
|
+
"attributes": [
|
|
12
|
+
{
|
|
13
|
+
"name": "size",
|
|
14
|
+
"default": "36",
|
|
15
|
+
"description": "头像尺寸(px)",
|
|
16
|
+
"value": { "type": "number", "kind": "expression" }
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "fontSize",
|
|
20
|
+
"default": "14",
|
|
21
|
+
"description": "文字大小(px)",
|
|
22
|
+
"value": { "type": "number", "kind": "expression" }
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "bgAttr",
|
|
26
|
+
"default": "-",
|
|
27
|
+
"description": "背景色属性",
|
|
28
|
+
"value": { "type": "string", "kind": "expression" }
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "date-picker",
|
|
34
|
+
"attributes": [
|
|
35
|
+
{
|
|
36
|
+
"name": "modelValue",
|
|
37
|
+
"default": "-",
|
|
38
|
+
"description": "值",
|
|
39
|
+
"value": { "type": "string", "kind": "expression" }
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "pickerProps",
|
|
43
|
+
"default": "-",
|
|
44
|
+
"description": "[date-picker props](https://vant-ui.github.io/vant/#/zh-CN/date-picker#props)",
|
|
45
|
+
"value": { "type": "`Partial<DatePickerProps>`", "kind": "expression" }
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "showValueFormatter",
|
|
49
|
+
"default": "-",
|
|
50
|
+
"description": "自定义展示值",
|
|
51
|
+
"value": { "type": "`showValueFormatter?: (date?: Date) => string`", "kind": "expression" }
|
|
52
|
+
}
|
|
53
|
+
],
|
|
54
|
+
"slots": [{ "name": "trigger", "description": "触发器" }]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "date-range-picker",
|
|
58
|
+
"attributes": [
|
|
59
|
+
{
|
|
60
|
+
"name": "modelValue",
|
|
61
|
+
"default": "-",
|
|
62
|
+
"description": "值",
|
|
63
|
+
"value": { "type": "`string[]`", "kind": "expression" }
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "pickerProps",
|
|
67
|
+
"default": "-",
|
|
68
|
+
"description": "[date-picker props](https://vant-ui.github.io/vant/#/zh-CN/date-picker#props)",
|
|
69
|
+
"value": { "type": "`Partial<DatePickerProps>`", "kind": "expression" }
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "pickerGroupProps",
|
|
73
|
+
"default": "-",
|
|
74
|
+
"description": "[picker-group props](https://vant-ui.github.io/vant/#/zh-CN/picker-group#props)",
|
|
75
|
+
"value": { "type": "`Partial<PickerGroupProps>`", "kind": "expression" }
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"name": "showValueFormatter",
|
|
79
|
+
"default": "-",
|
|
80
|
+
"description": "自定义展示值",
|
|
81
|
+
"value": {
|
|
82
|
+
"type": "`showValueFormatter?: (p: { startDate?: Date; endDate?: Date }) => string`",
|
|
83
|
+
"kind": "expression"
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"name": "beforeConfirm",
|
|
88
|
+
"default": "-",
|
|
89
|
+
"description": "确认前的自定义拦截处理逻辑",
|
|
90
|
+
"value": {
|
|
91
|
+
"type": "`beforeConfirm?: (newValues: TDateRangePickerProps['modelValue']) => boolean`",
|
|
92
|
+
"kind": "expression"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
],
|
|
96
|
+
"slots": [{ "name": "trigger", "description": "触发器" }]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"name": "field-multi-picker",
|
|
100
|
+
"attributes": [
|
|
101
|
+
{
|
|
102
|
+
"name": "fieldProps",
|
|
103
|
+
"default": "-",
|
|
104
|
+
"description": "当前选中项对应的值",
|
|
105
|
+
"value": { "type": "vant field props", "kind": "expression" }
|
|
106
|
+
}
|
|
107
|
+
],
|
|
108
|
+
"events": []
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"name": "field-single-picker",
|
|
112
|
+
"attributes": [
|
|
113
|
+
{
|
|
114
|
+
"name": "fieldProps",
|
|
115
|
+
"default": "-",
|
|
116
|
+
"description": "当前选中项对应的值",
|
|
117
|
+
"value": { "type": "vant field props", "kind": "expression" }
|
|
118
|
+
}
|
|
119
|
+
],
|
|
120
|
+
"events": []
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "field-switch-btn",
|
|
124
|
+
"attributes": [
|
|
125
|
+
{
|
|
126
|
+
"name": "modelValue",
|
|
127
|
+
"default": "-",
|
|
128
|
+
"description": "双向绑定值",
|
|
129
|
+
"value": { "type": "any", "kind": "expression" }
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "fieldProps",
|
|
133
|
+
"default": "-",
|
|
134
|
+
"description": "field props",
|
|
135
|
+
"value": { "type": "`Partial<Omit<FieldProps, 'modelValue'>>`", "kind": "expression" }
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "options",
|
|
139
|
+
"default": "-",
|
|
140
|
+
"description": "自定义选项",
|
|
141
|
+
"value": { "type": "`TSwitchOptions`", "kind": "expression" }
|
|
142
|
+
}
|
|
143
|
+
]
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"name": "mask-txt",
|
|
147
|
+
"attributes": [
|
|
148
|
+
{
|
|
149
|
+
"name": "maskId",
|
|
150
|
+
"default": "-",
|
|
151
|
+
"description": "数据标识,来源于后端,也需传递给后端",
|
|
152
|
+
"value": { "type": "string", "kind": "expression" }
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"name": "maskTxt",
|
|
156
|
+
"default": "-",
|
|
157
|
+
"description": "数据源(默认期望加密且脱敏)",
|
|
158
|
+
"value": { "type": "string", "kind": "expression" }
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"name": "iconSize",
|
|
162
|
+
"default": "16",
|
|
163
|
+
"description": "默认所展示的图标大小",
|
|
164
|
+
"value": { "type": "string | number", "kind": "expression" }
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "preset",
|
|
168
|
+
"default": "'modelValue'",
|
|
169
|
+
"description": "一些预设",
|
|
170
|
+
"value": { "type": "`Omit<IUseMaskedFieldOptions, 'maskId'", "kind": "expression" }
|
|
171
|
+
}
|
|
172
|
+
]
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "multi-picker",
|
|
176
|
+
"attributes": [
|
|
177
|
+
{
|
|
178
|
+
"name": "modelValue",
|
|
179
|
+
"default": "-",
|
|
180
|
+
"description": "当前选中项对应的值",
|
|
181
|
+
"value": { "type": "string[]", "kind": "expression" }
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "v-model",
|
|
185
|
+
"default": "-",
|
|
186
|
+
"description": "当前选中项对应的值",
|
|
187
|
+
"value": { "type": "string[]", "kind": "expression" }
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"name": "options",
|
|
191
|
+
"default": "-",
|
|
192
|
+
"description": "选项",
|
|
193
|
+
"value": {
|
|
194
|
+
"type": "Array<{ label: string; value: string; disabled?: boolean }> (label、value支持属性别名)",
|
|
195
|
+
"kind": "expression"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "fieldNames",
|
|
200
|
+
"default": "{ label: 'label', value: 'value' }",
|
|
201
|
+
"description": "字段别名",
|
|
202
|
+
"value": { "type": "{ label?: string; value?: string; }", "kind": "expression" }
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": "title",
|
|
206
|
+
"default": "-",
|
|
207
|
+
"description": "标题",
|
|
208
|
+
"value": { "type": "string", "kind": "expression" }
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "tipTxt",
|
|
212
|
+
"default": "-",
|
|
213
|
+
"description": "文本提示信息",
|
|
214
|
+
"value": { "type": "string", "kind": "expression" }
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "show-search",
|
|
218
|
+
"default": "false",
|
|
219
|
+
"description": "是否显示搜索框",
|
|
220
|
+
"value": { "type": "boolean", "kind": "expression" }
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"name": "search-delay",
|
|
224
|
+
"default": "300",
|
|
225
|
+
"description": "搜索防抖时间(ms)",
|
|
226
|
+
"value": { "type": "number", "kind": "expression" }
|
|
227
|
+
}
|
|
228
|
+
],
|
|
229
|
+
"events": [
|
|
230
|
+
{
|
|
231
|
+
"name": "update:modelValue",
|
|
232
|
+
"description": "当前选中项对应的值\n\nEmitted when the value of `modelValue` prop changes.",
|
|
233
|
+
"arguments": [{ "name": "modelValue", "type": "string[]" }]
|
|
234
|
+
}
|
|
235
|
+
]
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"name": "single-picker",
|
|
239
|
+
"attributes": [
|
|
240
|
+
{
|
|
241
|
+
"name": "modelValue",
|
|
242
|
+
"default": "-",
|
|
243
|
+
"description": "当前选中项对应的值",
|
|
244
|
+
"value": { "type": "string | undefinerd", "kind": "expression" }
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "v-model",
|
|
248
|
+
"default": "-",
|
|
249
|
+
"description": "当前选中项对应的值",
|
|
250
|
+
"value": { "type": "string | undefinerd", "kind": "expression" }
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"name": "picker-props",
|
|
254
|
+
"default": "",
|
|
255
|
+
"description": "[vant Picker 组件的 props](https://vant-ui.github.io/vant/#/zh-CN/picker#props)",
|
|
256
|
+
"value": { "type": "", "kind": "expression" }
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"name": "show-search",
|
|
260
|
+
"default": "false",
|
|
261
|
+
"description": "是否显示搜索框",
|
|
262
|
+
"value": { "type": "boolean", "kind": "expression" }
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"name": "search-delay",
|
|
266
|
+
"default": "300",
|
|
267
|
+
"description": "搜索防抖时间(ms)",
|
|
268
|
+
"value": { "type": "number", "kind": "expression" }
|
|
269
|
+
}
|
|
270
|
+
],
|
|
271
|
+
"events": [
|
|
272
|
+
{
|
|
273
|
+
"name": "update:modelValue",
|
|
274
|
+
"description": "当前选中项对应的值\n\nEmitted when the value of `modelValue` prop changes.",
|
|
275
|
+
"arguments": [{ "name": "modelValue", "type": "string | undefinerd" }]
|
|
276
|
+
}
|
|
277
|
+
]
|
|
278
|
+
}
|
|
279
|
+
],
|
|
280
|
+
"attributes": []
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
"js-types-syntax": "typescript"
|
|
284
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ebfe/vantkit-doc",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "A project that includes common components from the H5 project (dependent on vant) and some utility functions",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"dayjs": "^1.11.13",
|
|
45
45
|
"lodash": "^4.17.21",
|
|
46
46
|
"vant": "^4.9.21",
|
|
47
|
+
"@ebfe/vant-kit": "0.0.7",
|
|
47
48
|
"@ebfe/utils": "0.0.1",
|
|
48
|
-
"@ebfe/vant-kit": "0.0.5",
|
|
49
49
|
"@ebfe/vhooks": "0.0.3"
|
|
50
50
|
},
|
|
51
51
|
"scripts": {
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
# ColoringAvatar
|
|
2
|
-
|
|
3
|
-
### 介绍
|
|
4
|
-
|
|
5
|
-
着色头像
|
|
6
|
-
|
|
7
|
-
**主要功能描述**
|
|
8
|
-
|
|
9
|
-
- 内置中英文名称取值逻辑
|
|
10
|
-
- 内置渐变随机色
|
|
11
|
-
- 支持自定义
|
|
12
|
-
- 头像着色
|
|
13
|
-
- 文字大小
|
|
14
|
-
- 头像尺寸
|
|
15
|
-
|
|
16
|
-
## 代码演示
|
|
17
|
-
|
|
18
|
-
### 基础用法
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<template>
|
|
22
|
-
<demo-block title="中文名">
|
|
23
|
-
<section>
|
|
24
|
-
<span class="desc">展示后两个字符 (李钟硕)</span>
|
|
25
|
-
<ColoringAvatar name="李钟硕" />
|
|
26
|
-
</section>
|
|
27
|
-
</demo-block>
|
|
28
|
-
<demo-block title="英文名">
|
|
29
|
-
<section>
|
|
30
|
-
<span class="desc">展示第一个字符 (IU)</span>
|
|
31
|
-
<ColoringAvatar name="IU" />
|
|
32
|
-
</section>
|
|
33
|
-
</demo-block>
|
|
34
|
-
<demo-block title="自定义颜色">
|
|
35
|
-
<section>
|
|
36
|
-
<ColoringAvatar name="Ashun" :bg-attr="bgAttr" />
|
|
37
|
-
<van-space>
|
|
38
|
-
<van-button
|
|
39
|
-
size="small"
|
|
40
|
-
type="primary"
|
|
41
|
-
v-for="item in changeBgAttrList"
|
|
42
|
-
:key="item.value"
|
|
43
|
-
:color="item.value"
|
|
44
|
-
@click="setBgAttr(item.value)"
|
|
45
|
-
>
|
|
46
|
-
{{ item.desc }}
|
|
47
|
-
</van-button>
|
|
48
|
-
</van-space>
|
|
49
|
-
</section>
|
|
50
|
-
</demo-block>
|
|
51
|
-
<demo-block title="自定义文字大小">
|
|
52
|
-
<section>
|
|
53
|
-
<ColoringAvatar name="Ashun" :font-size="24" />
|
|
54
|
-
</section>
|
|
55
|
-
</demo-block>
|
|
56
|
-
</template>
|
|
57
|
-
|
|
58
|
-
<script setup lang="ts">
|
|
59
|
-
import { ColoringAvatar } from '@ebfe/vant-kit';
|
|
60
|
-
import { useWrapperRef } from '@ebfe/vhooks';
|
|
61
|
-
import { Space as VanSpace, Button as VanButton } from 'vant';
|
|
62
|
-
|
|
63
|
-
const changeBgAttrList = [
|
|
64
|
-
{
|
|
65
|
-
desc: '黑色',
|
|
66
|
-
value: 'black',
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
desc: '紫色',
|
|
70
|
-
value: '#8e44ad',
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
desc: '粉色',
|
|
74
|
-
value: 'pink',
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
desc: '土豪金',
|
|
78
|
-
value: 'linear-gradient(90deg, #b35b1d, #d97b2e, #d97b2e, #ffb86b, #d97b2e, #d97b2e, #b35b1d)',
|
|
79
|
-
},
|
|
80
|
-
];
|
|
81
|
-
const [bgAttr, setBgAttr] = useWrapperRef(changeBgAttrList[3].value);
|
|
82
|
-
</script>
|
|
83
|
-
|
|
84
|
-
<style scoped lang="less">
|
|
85
|
-
section {
|
|
86
|
-
padding: 0px 16px;
|
|
87
|
-
display: flex;
|
|
88
|
-
flex-direction: column;
|
|
89
|
-
justify-content: center;
|
|
90
|
-
align-items: center;
|
|
91
|
-
gap: 12px;
|
|
92
|
-
|
|
93
|
-
.desc {
|
|
94
|
-
font-size: 12px;
|
|
95
|
-
align-self: flex-start;
|
|
96
|
-
color: #aaa;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
</style>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
## API
|
|
103
|
-
|
|
104
|
-
### Props
|
|
105
|
-
|
|
106
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
107
|
-
| -------- | ------------ | ------ | ------ |
|
|
108
|
-
| size | 头像尺寸(px) | number | 36 |
|
|
109
|
-
| fontSize | 文字大小(px) | number | 14 |
|
|
110
|
-
| bgAttr | 背景色属性 | string | - |
|