stellar-ui-plus 1.23.0 → 1.23.2
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/common/auto-debug/useStellarDebug.ts +26 -26
- package/common/auto-debug/vite-plugin-auto-debug.js +66 -66
- package/components/ste-barcode/encode.ts +16 -16
- package/components/ste-donut-chart/ATTRIBUTES.md +33 -0
- package/components/ste-guide-qa/README.md +123 -123
- package/components/ste-guide-qa/ste-guide-qa.easycom.json +58 -58
- package/components/ste-message-box/ste-message-box.easycom.json +74 -2
- package/components/ste-number-keyboard/KeyboardVue.vue +0 -1
- package/components/ste-number-keyboard/README.md +12 -0
- package/components/ste-number-keyboard/useData.ts +10 -3
- package/components/ste-qrcode/uqrcode.js +33 -33
- package/components/ste-table/README.md +52 -0
- package/components/ste-table/ste-table.vue +52 -36
- package/components/ste-table-column/props.ts +14 -14
- package/components/ste-table-column/ste-table-column.vue +24 -2
- package/components/ste-table-column/sub-table.vue +117 -0
- package/index.ts +2 -0
- package/package.json +1 -1
- package/types/components.d.ts +2 -0
- package/types/refComponents.d.ts +2 -0
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { onLoad } from '@dcloudio/uni-app';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* 手动注册需要调试的变量。
|
|
5
|
-
* 在需要调试的页面的 <script setup> 中调用此函数。
|
|
6
|
-
*
|
|
7
|
-
* @param data 包含需要调试的变量的对象。
|
|
8
|
-
*/
|
|
9
|
-
export function useStellarDebug(data: Record<string, any>) {
|
|
10
|
-
onLoad(() => {
|
|
11
|
-
if (process.env.NODE_ENV !== 'development') {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const pages = getCurrentPages();
|
|
16
|
-
if (!pages.length) return;
|
|
17
|
-
|
|
18
|
-
const currentPage = pages[pages.length - 1];
|
|
19
|
-
const route = currentPage.route;
|
|
20
|
-
|
|
21
|
-
if (route && (globalThis as any).stellarDebugRegistry) {
|
|
22
|
-
(globalThis as any).stellarDebugRegistry.set(route, data);
|
|
23
|
-
console.log(`%c[StellarUI Debug] 成功为页面 ${route} 手动注册调试变量。`, 'color: #67C23A;');
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
}
|
|
1
|
+
import { onLoad } from '@dcloudio/uni-app';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 手动注册需要调试的变量。
|
|
5
|
+
* 在需要调试的页面的 <script setup> 中调用此函数。
|
|
6
|
+
*
|
|
7
|
+
* @param data 包含需要调试的变量的对象。
|
|
8
|
+
*/
|
|
9
|
+
export function useStellarDebug(data: Record<string, any>) {
|
|
10
|
+
onLoad(() => {
|
|
11
|
+
if (process.env.NODE_ENV !== 'development') {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const pages = getCurrentPages();
|
|
16
|
+
if (!pages.length) return;
|
|
17
|
+
|
|
18
|
+
const currentPage = pages[pages.length - 1];
|
|
19
|
+
const route = currentPage.route;
|
|
20
|
+
|
|
21
|
+
if (route && (globalThis as any).stellarDebugRegistry) {
|
|
22
|
+
(globalThis as any).stellarDebugRegistry.set(route, data);
|
|
23
|
+
console.log(`%c[StellarUI Debug] 成功为页面 ${route} 手动注册调试变量。`, 'color: #67C23A;');
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import { parse, compileScript } from '@vue/compiler-sfc';
|
|
2
|
-
|
|
3
|
-
export default function autoDebugPlugin(dirName) {
|
|
4
|
-
return {
|
|
5
|
-
name: 'vite-plugin-auto-debug',
|
|
6
|
-
enforce: 'pre',
|
|
7
|
-
transform(code, id) {
|
|
8
|
-
const isPage = id.endsWith('.vue') && (id.includes('/src/pages/') || id.includes('/src/subPackages') || (dirName && id.includes(dirName)));
|
|
9
|
-
|
|
10
|
-
if (!isPage) return null;
|
|
11
|
-
|
|
12
|
-
const { descriptor } = parse(code);
|
|
13
|
-
|
|
14
|
-
if (!descriptor.scriptSetup) {
|
|
15
|
-
return null;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
let scriptContent = descriptor.scriptSetup.content;
|
|
19
|
-
let scriptLang = descriptor.scriptSetup.lang || 'js';
|
|
20
|
-
|
|
21
|
-
const { bindings } = compileScript(descriptor, { id });
|
|
22
|
-
|
|
23
|
-
if (!bindings) {
|
|
24
|
-
return null;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const debugVars = Object.keys(bindings).filter(key => ['setup-ref', 'setup-reactive-const', 'setup-computed', 'setup-shallow-ref'].includes(bindings[key]));
|
|
28
|
-
|
|
29
|
-
if (debugVars.length === 0) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const injectionCall = `
|
|
34
|
-
import { useStellarDebug } from 'stellar-ui-plus/common/auto-debug/useStellarDebug';
|
|
35
|
-
useStellarDebug({ ${debugVars.join(', ')} });
|
|
36
|
-
`;
|
|
37
|
-
|
|
38
|
-
let newScriptContent = scriptContent + injectionCall;
|
|
39
|
-
|
|
40
|
-
let newCode = '';
|
|
41
|
-
|
|
42
|
-
if (descriptor.template) {
|
|
43
|
-
const attrs = Object.keys(descriptor.template.attrs)
|
|
44
|
-
.map(key => `${key}="${key === 'lang' ? descriptor.template.attrs[key] : descriptor.template.attrs[key]}"`)
|
|
45
|
-
.join(' ');
|
|
46
|
-
newCode += `<template ${attrs ? ` ${attrs}` : ''}>\n${descriptor.template.content}\n</template>\n`;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
newCode += `<script setup${scriptLang ? ` lang="${scriptLang}"` : ''}>\n${newScriptContent}\n</script>\n`;
|
|
50
|
-
|
|
51
|
-
if (descriptor.styles) {
|
|
52
|
-
descriptor.styles.forEach(style => {
|
|
53
|
-
const attrs = Object.keys(style.attrs)
|
|
54
|
-
.map(key => `${key}="${key === 'lang' ? style.attrs[key] : style.attrs[key]}"`)
|
|
55
|
-
.join(' ');
|
|
56
|
-
newCode += `<style${attrs ? ` ${attrs}` : ''}>\n${style.content}\n</style>\n`;
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
return {
|
|
61
|
-
code: newCode,
|
|
62
|
-
map: null,
|
|
63
|
-
};
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
}
|
|
1
|
+
import { parse, compileScript } from '@vue/compiler-sfc';
|
|
2
|
+
|
|
3
|
+
export default function autoDebugPlugin(dirName) {
|
|
4
|
+
return {
|
|
5
|
+
name: 'vite-plugin-auto-debug',
|
|
6
|
+
enforce: 'pre',
|
|
7
|
+
transform(code, id) {
|
|
8
|
+
const isPage = id.endsWith('.vue') && (id.includes('/src/pages/') || id.includes('/src/subPackages') || (dirName && id.includes(dirName)));
|
|
9
|
+
|
|
10
|
+
if (!isPage) return null;
|
|
11
|
+
|
|
12
|
+
const { descriptor } = parse(code);
|
|
13
|
+
|
|
14
|
+
if (!descriptor.scriptSetup) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
let scriptContent = descriptor.scriptSetup.content;
|
|
19
|
+
let scriptLang = descriptor.scriptSetup.lang || 'js';
|
|
20
|
+
|
|
21
|
+
const { bindings } = compileScript(descriptor, { id });
|
|
22
|
+
|
|
23
|
+
if (!bindings) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const debugVars = Object.keys(bindings).filter(key => ['setup-ref', 'setup-reactive-const', 'setup-computed', 'setup-shallow-ref'].includes(bindings[key]));
|
|
28
|
+
|
|
29
|
+
if (debugVars.length === 0) {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
const injectionCall = `
|
|
34
|
+
import { useStellarDebug } from 'stellar-ui-plus/common/auto-debug/useStellarDebug';
|
|
35
|
+
useStellarDebug({ ${debugVars.join(', ')} });
|
|
36
|
+
`;
|
|
37
|
+
|
|
38
|
+
let newScriptContent = scriptContent + injectionCall;
|
|
39
|
+
|
|
40
|
+
let newCode = '';
|
|
41
|
+
|
|
42
|
+
if (descriptor.template) {
|
|
43
|
+
const attrs = Object.keys(descriptor.template.attrs)
|
|
44
|
+
.map(key => `${key}="${key === 'lang' ? descriptor.template.attrs[key] : descriptor.template.attrs[key]}"`)
|
|
45
|
+
.join(' ');
|
|
46
|
+
newCode += `<template ${attrs ? ` ${attrs}` : ''}>\n${descriptor.template.content}\n</template>\n`;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
newCode += `<script setup${scriptLang ? ` lang="${scriptLang}"` : ''}>\n${newScriptContent}\n</script>\n`;
|
|
50
|
+
|
|
51
|
+
if (descriptor.styles) {
|
|
52
|
+
descriptor.styles.forEach(style => {
|
|
53
|
+
const attrs = Object.keys(style.attrs)
|
|
54
|
+
.map(key => `${key}="${key === 'lang' ? style.attrs[key] : style.attrs[key]}"`)
|
|
55
|
+
.join(' ');
|
|
56
|
+
newCode += `<style${attrs ? ` ${attrs}` : ''}>\n${style.content}\n</style>\n`;
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return {
|
|
61
|
+
code: newCode,
|
|
62
|
+
map: null,
|
|
63
|
+
};
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
}
|
|
@@ -172,7 +172,7 @@ export function stringToCode128(text: string) {
|
|
|
172
172
|
|
|
173
173
|
codes = codes.concat(codesForChar(b1, b2, barc.currcs))
|
|
174
174
|
// code C takes 2 chars each time
|
|
175
|
-
if (barc.currcs === CODESET.C)
|
|
175
|
+
if (barc.currcs === CODESET.C)
|
|
176
176
|
i++
|
|
177
177
|
}
|
|
178
178
|
|
|
@@ -203,7 +203,7 @@ export function stringToCode128(text: string) {
|
|
|
203
203
|
function perhapsCodeC(bytes: number[], codeset: number) {
|
|
204
204
|
for (let i = 0; i < bytes.length; i++) {
|
|
205
205
|
const b = bytes[i]
|
|
206
|
-
if ((b < 48 || b > 57) && b !== CHAR_TILDE)
|
|
206
|
+
if ((b < 48 || b > 57) && b !== CHAR_TILDE)
|
|
207
207
|
return codeset
|
|
208
208
|
}
|
|
209
209
|
return CODESET.C
|
|
@@ -221,13 +221,13 @@ export function stringToCode128(text: string) {
|
|
|
221
221
|
if (chr2 === -1) {
|
|
222
222
|
shifter === SET_CODEB
|
|
223
223
|
currcs = CODESET.B
|
|
224
|
-
}
|
|
224
|
+
}
|
|
225
225
|
else if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
|
|
226
226
|
// need to check ahead as well
|
|
227
227
|
if (charCompatible(chr2, CODESET.A)) {
|
|
228
228
|
shifter = SET_CODEA
|
|
229
229
|
currcs = CODESET.A
|
|
230
|
-
}
|
|
230
|
+
}
|
|
231
231
|
else {
|
|
232
232
|
shifter = SET_CODEB
|
|
233
233
|
currcs = CODESET.B
|
|
@@ -235,7 +235,7 @@ export function stringToCode128(text: string) {
|
|
|
235
235
|
}
|
|
236
236
|
}
|
|
237
237
|
/* eslint-enable no-unused-expressions */
|
|
238
|
-
}
|
|
238
|
+
}
|
|
239
239
|
else {
|
|
240
240
|
// if there is a next char AND that next char is also not compatible
|
|
241
241
|
|
|
@@ -251,11 +251,11 @@ export function stringToCode128(text: string) {
|
|
|
251
251
|
currcs = CODESET.A
|
|
252
252
|
break
|
|
253
253
|
}
|
|
254
|
-
}
|
|
254
|
+
}
|
|
255
255
|
else {
|
|
256
256
|
// no need to shift code sets, a temporary SHIFT will suffice
|
|
257
257
|
shifter = SET_SHIFT
|
|
258
|
-
}
|
|
258
|
+
}
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
// ok some type of shift is nessecary
|
|
@@ -263,12 +263,12 @@ export function stringToCode128(text: string) {
|
|
|
263
263
|
result.push(shifter)
|
|
264
264
|
// result.push(codeValue(chr2));-----------------------------------
|
|
265
265
|
result.push(codeValue(chr1))
|
|
266
|
-
}
|
|
266
|
+
}
|
|
267
267
|
else {
|
|
268
268
|
if (currcs === CODESET.C) {
|
|
269
269
|
// include next as well
|
|
270
270
|
result.push(codeValue(chr1, chr2))
|
|
271
|
-
}
|
|
271
|
+
}
|
|
272
272
|
else {
|
|
273
273
|
result.push(codeValue(chr1))
|
|
274
274
|
}
|
|
@@ -284,19 +284,19 @@ function codeValue(chr1: number, chr2: any = undefined) {
|
|
|
284
284
|
if (typeof chr2 === 'undefined')
|
|
285
285
|
return chr1 >= 32 ? chr1 - 32 : chr1 + 64
|
|
286
286
|
else
|
|
287
|
-
return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
|
|
287
|
+
return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
function charCompatible(chr: number, codeset: number) {
|
|
291
291
|
const csa = codeSetAllowedFor(chr)
|
|
292
|
-
if (csa === CODESET.ANY)
|
|
292
|
+
if (csa === CODESET.ANY)
|
|
293
293
|
return true
|
|
294
294
|
// if we need to change from current
|
|
295
|
-
if (csa === CODESET.AB)
|
|
295
|
+
if (csa === CODESET.AB)
|
|
296
296
|
return true
|
|
297
|
-
if (csa === CODESET.A && codeset === CODESET.A)
|
|
297
|
+
if (csa === CODESET.A && codeset === CODESET.A)
|
|
298
298
|
return true
|
|
299
|
-
if (csa === CODESET.B && codeset === CODESET.B)
|
|
299
|
+
if (csa === CODESET.B && codeset === CODESET.B)
|
|
300
300
|
return true
|
|
301
301
|
return false
|
|
302
302
|
}
|
|
@@ -305,11 +305,11 @@ function codeSetAllowedFor(chr: number) {
|
|
|
305
305
|
if (chr >= 48 && chr <= 57) {
|
|
306
306
|
// 0-9
|
|
307
307
|
return CODESET.ANY
|
|
308
|
-
}
|
|
308
|
+
}
|
|
309
309
|
else if (chr >= 32 && chr <= 95) {
|
|
310
310
|
// 0-9 A-Z
|
|
311
311
|
return CODESET.AB
|
|
312
|
-
}
|
|
312
|
+
}
|
|
313
313
|
else {
|
|
314
314
|
// if non printable
|
|
315
315
|
return chr < 32 ? CODESET.A : CODESET.B
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
#### Props
|
|
2
|
+
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
|
|
3
|
+
| ----- | ----- | --- | ------- | ------ | -------- |
|
|
4
|
+
| `width` | 图表宽度,单位rpx | `number / string` | `750` | - | - |
|
|
5
|
+
| `height` | 图表高度,单位rpx | `number / string` | `200` | - | - |
|
|
6
|
+
| `canvas2d` | canvas2d模式,用于解决小程序层级过高及拖拽卡顿问题 | `boolean` | `true` | - | - |
|
|
7
|
+
| `pixelRatio` | 设备像素比,解决开启canvas2d后画布模糊的问题 | `number` | `微信小程序由具体设备决定,其余的默认为1` | - | - |
|
|
8
|
+
| `animation` | 是否动画展示图表 | `boolean` | `true` | - | - |
|
|
9
|
+
| `timing` | 图表动画效果 | `string` | `easeOut` | `easeOut`:由快到慢<br/>`easeIn`:由慢到快<br/>`easeInOut`:慢快慢<br/>`linear`:匀速 | - |
|
|
10
|
+
| `duration` | 动画展示时长(单位:毫秒) | `string` | `1000` | - | - |
|
|
11
|
+
| `rotate` | 横屏模式 | `boolean` | `false` | - | - |
|
|
12
|
+
| `rotateLock` | 横屏锁定模式 | `boolean` | `false` | - | - |
|
|
13
|
+
| `background` | 背景颜色,开启滚动条后请赋值 | `string` | `rgba(0,0,0,0)` | - | - |
|
|
14
|
+
| `color` | 主题颜色数组,16进制颜色格式 | `array` | `["#165DFF","#14C9C9","#F7BA1E","#3491FA","#722ED1","#9FDB1D"]` | - | - |
|
|
15
|
+
| `padding` | 画布填充边距(顺序为上右下左),单位px | `array` | `[5,5,5,5]` | - | - |
|
|
16
|
+
| `fontSize` | 全局默认字体大小,单位px | `number` | `13` | - | - |
|
|
17
|
+
| `fontColor` | 全局默认字体颜色 | `string` | `#666666` | - | - |
|
|
18
|
+
| `dataLabel` | 是否显示图表区域内数据点上方的数据文案 | `boolean` | `false` | - | - |
|
|
19
|
+
| `dataPointShape` | 是否显示数据点的图形标识 | `boolean` | `true` | - | - |
|
|
20
|
+
| `dataPointShapeType` | 图形标识点显示类型 | `string` | `solid` | `solid`:实心<br/>`hollow`:空心 | - |
|
|
21
|
+
| `touchMoveLimit` | 图表拖拽时每秒重新渲染的帧数 | `number` | `24` | - | - |
|
|
22
|
+
| `enableScroll` | 开启滚动条功能 | `boolean` | `false` | - | - |
|
|
23
|
+
| `enableMarkLine` | 是否启用标记线功能 | `boolean` | `false` | - | - |
|
|
24
|
+
| `scrollPosition` | 连续更新数据时滚动条的位置 | `string` | `current` | `current`:当前位置<br/>`left`:左对齐<br/>`right`:右对齐 | - |
|
|
25
|
+
| `series` | 图表数据 | `object` | `{}` | - | - |
|
|
26
|
+
| `xAxis` | X轴配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
|
|
27
|
+
| `yAxis` | Y轴配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
|
|
28
|
+
| `legend` | 图例配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
|
|
29
|
+
| `title` | 标题配置(仅适用于 ring、arcbar、gauge) | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
|
|
30
|
+
| `subtitle` | 副标题配置 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
|
|
31
|
+
| `extra` | 额外配置项 | `-` | <a href="https://www.ucharts.cn/v2/#/document/index" target="_blank">文档地址</a> | - | - |
|
|
32
|
+
|
|
33
|
+
|
|
@@ -1,123 +1,123 @@
|
|
|
1
|
-
# GuideQA 引导服务区
|
|
2
|
-
|
|
3
|
-
问答组件,用于展示常见问题和答案
|
|
4
|
-
|
|
5
|
-
---$
|
|
6
|
-
|
|
7
|
-
### 代码演示
|
|
8
|
-
|
|
9
|
-
#### 简单模式
|
|
10
|
-
|
|
11
|
-
通过`mode="1"`设置为简单模式,默认显示模式
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<template>
|
|
15
|
-
<ste-guide-qa :data="data" @click-all="handleClickAll"></ste-guide-qa>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<script setup>
|
|
19
|
-
import { ref } from 'vue';
|
|
20
|
-
|
|
21
|
-
const data = ref([
|
|
22
|
-
{
|
|
23
|
-
question: '如何快速上手这个组件?',
|
|
24
|
-
answer: '请查看我们的快速入门指南,按照步骤操作即可。',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
question: '支持哪些浏览器?',
|
|
28
|
-
answer: '支持 Chrome 80+、Firefox 78+、Safari 14+、Edge 88+ 等现代浏览器。',
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
question: '如何自定义样式?',
|
|
32
|
-
answer: '可以通过 CSS 变量或者传入自定义的 class 来覆盖默认样式。',
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
question: '遇到问题如何反馈?',
|
|
36
|
-
answer: '可以通过 GitHub Issues 或者官方交流群进行反馈。',
|
|
37
|
-
},
|
|
38
|
-
]);
|
|
39
|
-
|
|
40
|
-
const handleClickAll = () => {
|
|
41
|
-
console.log('点击查看全部');
|
|
42
|
-
};
|
|
43
|
-
</script>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
#### 完整模式
|
|
47
|
-
|
|
48
|
-
通过`mode="2"`设置为完整模式,支持点击问题和答案
|
|
49
|
-
|
|
50
|
-
```html
|
|
51
|
-
<template>
|
|
52
|
-
<ste-guide-qa :data="data" mode="2" @click-item="handleClickItem"></ste-guide-qa>
|
|
53
|
-
</template>
|
|
54
|
-
|
|
55
|
-
<script setup>
|
|
56
|
-
import { ref } from 'vue';
|
|
57
|
-
|
|
58
|
-
const data = ref([
|
|
59
|
-
{
|
|
60
|
-
question: '如何快速上手这个组件?',
|
|
61
|
-
answer: '请查看我们的快速入门指南,按照步骤操作即可。',
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
question: '支持哪些浏览器?',
|
|
65
|
-
answer: '支持 Chrome 80+、Firefox 78+、Safari 14+、Edge 88+ 等现代浏览器。',
|
|
66
|
-
},
|
|
67
|
-
]);
|
|
68
|
-
|
|
69
|
-
const handleClickItem = (type, item) => {
|
|
70
|
-
console.log(`点击了${type === 'q' ? '问题' : '答案'}:`, item);
|
|
71
|
-
};
|
|
72
|
-
</script>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
#### 自定义标题
|
|
76
|
-
|
|
77
|
-
通过`title`设置标题文本,`actionTitle`设置操作按钮文本
|
|
78
|
-
|
|
79
|
-
```html
|
|
80
|
-
<template>
|
|
81
|
-
<ste-guide-qa :data="data" title="帮助中心" actionTitle="查看更多" @click-all="handleClickAll"></ste-guide-qa>
|
|
82
|
-
</template>
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
#### 是否显示数量
|
|
86
|
-
|
|
87
|
-
通过`showNum`控制是否显示数量
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<template>
|
|
91
|
-
<ste-guide-qa :data="data" :showNum="false"></ste-guide-qa>
|
|
92
|
-
</template>
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
---$
|
|
96
|
-
|
|
97
|
-
### API
|
|
98
|
-
|
|
99
|
-
<!-- props -->
|
|
100
|
-
|
|
101
|
-
#### Slots
|
|
102
|
-
|
|
103
|
-
| 插槽名 | 说明 | 插槽参数 | 支持版本 |
|
|
104
|
-
| ---------- | -------- | -------- | -------- |
|
|
105
|
-
| `prefix-q` | 问题前缀 | - | - |
|
|
106
|
-
| `prefix-a` | 答案前缀 | - | - |
|
|
107
|
-
|
|
108
|
-
#### Types
|
|
109
|
-
|
|
110
|
-
```typescript
|
|
111
|
-
export interface GuideQaItem {
|
|
112
|
-
question: string;
|
|
113
|
-
answer: string;
|
|
114
|
-
[key: string]: any;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export type ClickType = 'q' | 'a';
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
---$
|
|
121
|
-
{{fuyuwei}}
|
|
122
|
-
|
|
123
|
-
{{qinpengfei}}
|
|
1
|
+
# GuideQA 引导服务区
|
|
2
|
+
|
|
3
|
+
问答组件,用于展示常见问题和答案
|
|
4
|
+
|
|
5
|
+
---$
|
|
6
|
+
|
|
7
|
+
### 代码演示
|
|
8
|
+
|
|
9
|
+
#### 简单模式
|
|
10
|
+
|
|
11
|
+
通过`mode="1"`设置为简单模式,默认显示模式
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<template>
|
|
15
|
+
<ste-guide-qa :data="data" @click-all="handleClickAll"></ste-guide-qa>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script setup>
|
|
19
|
+
import { ref } from 'vue';
|
|
20
|
+
|
|
21
|
+
const data = ref([
|
|
22
|
+
{
|
|
23
|
+
question: '如何快速上手这个组件?',
|
|
24
|
+
answer: '请查看我们的快速入门指南,按照步骤操作即可。',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: '支持哪些浏览器?',
|
|
28
|
+
answer: '支持 Chrome 80+、Firefox 78+、Safari 14+、Edge 88+ 等现代浏览器。',
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: '如何自定义样式?',
|
|
32
|
+
answer: '可以通过 CSS 变量或者传入自定义的 class 来覆盖默认样式。',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
question: '遇到问题如何反馈?',
|
|
36
|
+
answer: '可以通过 GitHub Issues 或者官方交流群进行反馈。',
|
|
37
|
+
},
|
|
38
|
+
]);
|
|
39
|
+
|
|
40
|
+
const handleClickAll = () => {
|
|
41
|
+
console.log('点击查看全部');
|
|
42
|
+
};
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
#### 完整模式
|
|
47
|
+
|
|
48
|
+
通过`mode="2"`设置为完整模式,支持点击问题和答案
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<template>
|
|
52
|
+
<ste-guide-qa :data="data" mode="2" @click-item="handleClickItem"></ste-guide-qa>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script setup>
|
|
56
|
+
import { ref } from 'vue';
|
|
57
|
+
|
|
58
|
+
const data = ref([
|
|
59
|
+
{
|
|
60
|
+
question: '如何快速上手这个组件?',
|
|
61
|
+
answer: '请查看我们的快速入门指南,按照步骤操作即可。',
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
question: '支持哪些浏览器?',
|
|
65
|
+
answer: '支持 Chrome 80+、Firefox 78+、Safari 14+、Edge 88+ 等现代浏览器。',
|
|
66
|
+
},
|
|
67
|
+
]);
|
|
68
|
+
|
|
69
|
+
const handleClickItem = (type, item) => {
|
|
70
|
+
console.log(`点击了${type === 'q' ? '问题' : '答案'}:`, item);
|
|
71
|
+
};
|
|
72
|
+
</script>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### 自定义标题
|
|
76
|
+
|
|
77
|
+
通过`title`设置标题文本,`actionTitle`设置操作按钮文本
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<template>
|
|
81
|
+
<ste-guide-qa :data="data" title="帮助中心" actionTitle="查看更多" @click-all="handleClickAll"></ste-guide-qa>
|
|
82
|
+
</template>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
#### 是否显示数量
|
|
86
|
+
|
|
87
|
+
通过`showNum`控制是否显示数量
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<template>
|
|
91
|
+
<ste-guide-qa :data="data" :showNum="false"></ste-guide-qa>
|
|
92
|
+
</template>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---$
|
|
96
|
+
|
|
97
|
+
### API
|
|
98
|
+
|
|
99
|
+
<!-- props -->
|
|
100
|
+
|
|
101
|
+
#### Slots
|
|
102
|
+
|
|
103
|
+
| 插槽名 | 说明 | 插槽参数 | 支持版本 |
|
|
104
|
+
| ---------- | -------- | -------- | -------- |
|
|
105
|
+
| `prefix-q` | 问题前缀 | - | - |
|
|
106
|
+
| `prefix-a` | 答案前缀 | - | - |
|
|
107
|
+
|
|
108
|
+
#### Types
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
export interface GuideQaItem {
|
|
112
|
+
question: string;
|
|
113
|
+
answer: string;
|
|
114
|
+
[key: string]: any;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export type ClickType = 'q' | 'a';
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
---$
|
|
121
|
+
{{fuyuwei}}
|
|
122
|
+
|
|
123
|
+
{{qinpengfei}}
|