meixioacomponent 2.0.47 → 2.0.49
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/lib/components/base/baseGuide/GuideControl.d.ts +44 -44
- package/lib/components/base/baseGuide/GuideControl.js +238 -238
- package/lib/components/dynamicmount/DynamicMountClass.d.ts +15 -15
- package/lib/components/dynamicmount/DynamicMountClass.js +65 -65
- package/lib/components/dynamicmount/index.d.ts +4 -4
- package/lib/components/dynamicmount/index.js +71 -71
- package/lib/components/index.d.ts +110 -110
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +244 -242
- package/lib/config/LinkViewClass.d.ts +56 -56
- package/lib/config/LinkViewClass.js +154 -154
- package/lib/config/ProTableLocalConfigManage/ProTableLocalConfigManage.d.ts +12 -12
- package/lib/config/ProTableLocalConfigManage/ProTableLocalConfigManage.js +68 -68
- package/lib/config/componentConfig.d.ts +3 -3
- package/lib/config/componentConfig.js +71 -71
- package/lib/config/uploadRequest.d.ts +2 -2
- package/lib/config/uploadRequest.js +87 -87
- package/lib/config/use/UseGuide.d.ts +8 -8
- package/lib/config/use/UseGuide.js +33 -33
- package/lib/config/use/UseImg.d.ts +9 -9
- package/lib/config/use/UseImg.js +44 -44
- package/lib/config/use/UseUpload.d.ts +12 -12
- package/lib/config/use/UseUpload.js +79 -79
- package/lib/config/use/UseViewVideo.d.ts +11 -11
- package/lib/config/use/UseViewVideo.js +41 -41
- package/lib/config/use/UseWait.d.ts +4 -4
- package/lib/config/use/UseWait.js +21 -21
- package/lib/config/use/WaitPlugin.d.ts +25 -25
- package/lib/config/use/WaitPlugin.js +106 -106
- package/lib/config/use/useConfirm/UseConfirm.d.ts +6 -6
- package/lib/config/use/useConfirm/UseConfirm.js +33 -33
- package/lib/config/use/useConfirm/UseNotify.d.ts +6 -6
- package/lib/config/use/useConfirm/UseNotify.js +18 -18
- package/lib/config/use/useConfirm/executeConfirm.d.ts +2 -2
- package/lib/config/use/useConfirm/executeConfirm.js +11 -11
- package/lib/config/use/useConfirm/registerConfirm.d.ts +4 -4
- package/lib/config/use/useConfirm/registerConfirm.js +8 -8
- package/lib/meixioacomponent.common.js +22844 -22820
- package/lib/meixioacomponent.umd.js +22824 -22800
- package/lib/meixioacomponent.umd.min.js +3 -3
- package/lib/plugin/PluginByReferenceByOss.d.ts +2 -0
- package/lib/plugin/PluginByReferenceByOss.d.ts.map +1 -0
- package/lib/plugin/PluginByReferenceByOss.js +16 -0
- package/lib/style/tdesignStyle.less +21 -21
- package/lib/typings/type.d.ts +405 -405
- package/lib/typings/type.js +2 -2
- package/lib/useType/useType.d.ts +27 -27
- package/lib/useType/useType.js +89 -89
- package/package.json +1 -1
- package/packages/components/base/baseAnchor/baseAnchor.vue +168 -168
- package/packages/components/base/baseAnchor/baseAnchorV2.vue +165 -165
- package/packages/components/base/baseArea/api.js +6 -6
- package/packages/components/base/baseArea/area.js +14979 -14979
- package/packages/components/base/baseArea/areaConfig.js +7 -7
- package/packages/components/base/baseArea/baseArea.vue +590 -590
- package/packages/components/base/baseArea/baseAreaV2.vue +144 -144
- package/packages/components/base/baseArea/baseAreaV21.vue +156 -156
- package/packages/components/base/baseArea/index.js +6 -6
- package/packages/components/base/baseAreaByMultiple/baseAreaByMultiple.vue +70 -70
- package/packages/components/base/baseAreaByMultiple/index.js +7 -7
- package/packages/components/base/baseButton/baseButton.vue +85 -85
- package/packages/components/base/baseButton/index.js +6 -6
- package/packages/components/base/baseInput/baseInput.vue +98 -98
- package/packages/components/base/baseSelect/baseSelect.vue +102 -102
- package/packages/components/base/baseSelect/index.js +6 -6
- package/packages/components/base/baseTimeRangePicker/baseTimeRangePicker.vue +59 -59
- package/packages/components/base/baseTimeRangePicker/index.js +7 -7
- package/packages/components/base/tDateRangePicker/index.js +5 -5
- package/packages/components/base/tDateRangePicker/tDateRangePicker.vue +95 -95
- package/packages/components/dynamicmount/DynamicMountClass.js +64 -64
- package/packages/components/dynamicmount/index.js +69 -69
- package/packages/components/hooks/useHookByBaseArea.js +49 -49
- package/packages/components/hooks/useHookByGuide.js +46 -46
- package/packages/components/hooks/useHookByUpload.js +130 -130
- package/packages/components/index.js +241 -239
- package/packages/components/index.ts +2 -0
- package/packages/components/mixins/mixinsByBaseArea.js +53 -53
- package/packages/components/proPageTable/oa_pro_colum_config.vue +1 -1
- package/packages/components/proPageTable/oa_pro_table.vue +3 -4
- package/packages/components/style/tdesignStyle.less +21 -21
- package/packages/config/LinkViewClass.js +152 -152
- package/packages/config/ProTableLocalConfigManage/ProTableLocalConfigManage.js +75 -75
- package/packages/config/ProTableLocalConfigManage/ProTableLocalConfigManage.ts +99 -99
- package/packages/config/componentConfig.js +68 -68
- package/packages/config/use/UseGuide.js +43 -43
- package/packages/config/use/UseImg.js +44 -44
- package/packages/config/use/UseUpload.js +79 -79
- package/packages/config/use/UseViewVideo.js +40 -40
- package/packages/config/use/UseWait.js +18 -18
- package/packages/config/use/WaitPlugin.js +106 -106
- package/packages/config/use/useConfirm/UseConfirm.js +31 -31
- package/packages/config/use/useConfirm/UseConfirm.ts +34 -34
- package/packages/config/use/useConfirm/UseNotify.js +16 -16
- package/packages/config/use/useConfirm/UseNotify.ts +18 -18
- package/packages/config/use/useConfirm/executeConfirm.js +8 -8
- package/packages/config/use/useConfirm/executeConfirm.ts +6 -6
- package/packages/config/use/useConfirm/registerConfirm.js +8 -8
- package/packages/config/use/useConfirm/registerConfirm.ts +7 -7
- package/packages/plugin/PluginByReferenceByOss.js +16 -0
- package/packages/plugin/PluginByReferenceByOss.ts +13 -0
- package/packages/typings/type.js +2 -2
- package/packages/useType/useType.js +90 -90
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import { DynamicMountInterface, GuideControlInterface, GuideStepsType } from "../../../typings/type";
|
|
2
|
-
declare class GuideControl implements GuideControlInterface {
|
|
3
|
-
isOverlay: boolean;
|
|
4
|
-
steps: GuideStepsType[];
|
|
5
|
-
show: boolean;
|
|
6
|
-
component: any;
|
|
7
|
-
current: number;
|
|
8
|
-
guideLight?: DynamicMountInterface | null;
|
|
9
|
-
guideContent?: DynamicMountInterface | null;
|
|
10
|
-
guideLightPosition: string | null;
|
|
11
|
-
errorIds: Set<String>;
|
|
12
|
-
constructor(defaultCurrent: number, steps: GuideStepsType[], component: any);
|
|
13
|
-
onStartGuide(): void;
|
|
14
|
-
onDomError(index: any): void;
|
|
15
|
-
createGuideOverlay(): void;
|
|
16
|
-
createGuideLight(): void;
|
|
17
|
-
/**
|
|
18
|
-
* 获取node节点
|
|
19
|
-
* @param element
|
|
20
|
-
*/
|
|
21
|
-
getGuideContentByElement(element: any): any;
|
|
22
|
-
createGuideContent(): void;
|
|
23
|
-
setGuideLightPosition(position: any): void;
|
|
24
|
-
getGuideHandleButtonConfig(value: any): {
|
|
25
|
-
text: string;
|
|
26
|
-
type: string;
|
|
27
|
-
click: (type?: boolean) => void;
|
|
28
|
-
}[];
|
|
29
|
-
onNextStepClick: () => void;
|
|
30
|
-
/**
|
|
31
|
-
* 需要判断是否是异步的下一步
|
|
32
|
-
*/
|
|
33
|
-
onBeforeNext(): boolean;
|
|
34
|
-
/**
|
|
35
|
-
* 开始下一步
|
|
36
|
-
*/
|
|
37
|
-
startNextStep(): void;
|
|
38
|
-
onPrevStepClick: (type?: boolean) => void;
|
|
39
|
-
onFinish: () => void;
|
|
40
|
-
onSkip: () => void;
|
|
41
|
-
beforeDestroy(): void;
|
|
42
|
-
destroyComponent(): void;
|
|
43
|
-
}
|
|
44
|
-
export default GuideControl;
|
|
1
|
+
import { DynamicMountInterface, GuideControlInterface, GuideStepsType } from "../../../typings/type";
|
|
2
|
+
declare class GuideControl implements GuideControlInterface {
|
|
3
|
+
isOverlay: boolean;
|
|
4
|
+
steps: GuideStepsType[];
|
|
5
|
+
show: boolean;
|
|
6
|
+
component: any;
|
|
7
|
+
current: number;
|
|
8
|
+
guideLight?: DynamicMountInterface | null;
|
|
9
|
+
guideContent?: DynamicMountInterface | null;
|
|
10
|
+
guideLightPosition: string | null;
|
|
11
|
+
errorIds: Set<String>;
|
|
12
|
+
constructor(defaultCurrent: number, steps: GuideStepsType[], component: any);
|
|
13
|
+
onStartGuide(): void;
|
|
14
|
+
onDomError(index: any): void;
|
|
15
|
+
createGuideOverlay(): void;
|
|
16
|
+
createGuideLight(): void;
|
|
17
|
+
/**
|
|
18
|
+
* 获取node节点
|
|
19
|
+
* @param element
|
|
20
|
+
*/
|
|
21
|
+
getGuideContentByElement(element: any): any;
|
|
22
|
+
createGuideContent(): void;
|
|
23
|
+
setGuideLightPosition(position: any): void;
|
|
24
|
+
getGuideHandleButtonConfig(value: any): {
|
|
25
|
+
text: string;
|
|
26
|
+
type: string;
|
|
27
|
+
click: (type?: boolean) => void;
|
|
28
|
+
}[];
|
|
29
|
+
onNextStepClick: () => void;
|
|
30
|
+
/**
|
|
31
|
+
* 需要判断是否是异步的下一步
|
|
32
|
+
*/
|
|
33
|
+
onBeforeNext(): boolean;
|
|
34
|
+
/**
|
|
35
|
+
* 开始下一步
|
|
36
|
+
*/
|
|
37
|
+
startNextStep(): void;
|
|
38
|
+
onPrevStepClick: (type?: boolean) => void;
|
|
39
|
+
onFinish: () => void;
|
|
40
|
+
onSkip: () => void;
|
|
41
|
+
beforeDestroy(): void;
|
|
42
|
+
destroyComponent(): void;
|
|
43
|
+
}
|
|
44
|
+
export default GuideControl;
|
|
45
45
|
//# sourceMappingURL=GuideControl.d.ts.map
|
|
@@ -1,238 +1,238 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const guideContent_vue_1 = __importDefault(require("./guideContent.vue"));
|
|
7
|
-
const guideLight_vue_1 = __importDefault(require("./guideLight.vue"));
|
|
8
|
-
const DynamicMountClass_1 = __importDefault(require("../../dynamicmount/DynamicMountClass"));
|
|
9
|
-
class GuideControl {
|
|
10
|
-
constructor(defaultCurrent, steps, component) {
|
|
11
|
-
// 点击下一步的操作
|
|
12
|
-
this.onNextStepClick = () => {
|
|
13
|
-
const flag = this.onBeforeNext();
|
|
14
|
-
if (flag) {
|
|
15
|
-
this.startNextStep();
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
this.onPrevStepClick = (type = false) => {
|
|
19
|
-
let index = this.current - 1;
|
|
20
|
-
if (index === 0 && this.errorIds.size > 0 && type) {
|
|
21
|
-
this.onSkip();
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
if (this.errorIds.has(`${index}`)) {
|
|
25
|
-
this.current -= 1;
|
|
26
|
-
this.onPrevStepClick(true);
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
this.current = index;
|
|
30
|
-
try {
|
|
31
|
-
this.component.onNextStepClick(this.current);
|
|
32
|
-
}
|
|
33
|
-
catch (error) {
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
this.onFinish = () => {
|
|
38
|
-
try {
|
|
39
|
-
this.component.onFinish(this.current);
|
|
40
|
-
}
|
|
41
|
-
catch (error) {
|
|
42
|
-
}
|
|
43
|
-
finally {
|
|
44
|
-
this.beforeDestroy();
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
this.onSkip = () => {
|
|
48
|
-
try {
|
|
49
|
-
this.component.onSkip(this.current);
|
|
50
|
-
}
|
|
51
|
-
catch (error) {
|
|
52
|
-
}
|
|
53
|
-
finally {
|
|
54
|
-
this.beforeDestroy();
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
this.isOverlay = true;
|
|
58
|
-
this.steps = steps;
|
|
59
|
-
this.show = false;
|
|
60
|
-
this.component = component;
|
|
61
|
-
this.current = defaultCurrent;
|
|
62
|
-
// guideLight 组件
|
|
63
|
-
this.guideLight = null;
|
|
64
|
-
// 引导组件的内容
|
|
65
|
-
this.guideContent = null;
|
|
66
|
-
// 引导需要展示的位置
|
|
67
|
-
this.guideLightPosition = null;
|
|
68
|
-
// 记录dom节点没有导致的引导错误的节点
|
|
69
|
-
this.errorIds = new Set();
|
|
70
|
-
}
|
|
71
|
-
onStartGuide() {
|
|
72
|
-
setTimeout(() => {
|
|
73
|
-
this.component.$on('hook:destroyed', () => {
|
|
74
|
-
this.destroyComponent();
|
|
75
|
-
});
|
|
76
|
-
this.show = true;
|
|
77
|
-
if (this.isOverlay) {
|
|
78
|
-
this.createGuideOverlay();
|
|
79
|
-
}
|
|
80
|
-
if (!this.guideLight) {
|
|
81
|
-
this.createGuideLight();
|
|
82
|
-
}
|
|
83
|
-
}, 500);
|
|
84
|
-
}
|
|
85
|
-
// 当dom节点不存在时,跳过改次引导
|
|
86
|
-
onDomError(index) {
|
|
87
|
-
this.errorIds.add(`${index}`);
|
|
88
|
-
let _index = this.current + 1;
|
|
89
|
-
if (_index == this.steps.length) {
|
|
90
|
-
this.onFinish();
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
this.current = _index;
|
|
94
|
-
this.onBeforeNext();
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
// 创建遮罩层
|
|
98
|
-
createGuideOverlay() {
|
|
99
|
-
const { zIndex } = this.component;
|
|
100
|
-
let overlay = document.createElement('div');
|
|
101
|
-
overlay.setAttribute('class', 'base-guide-overlay');
|
|
102
|
-
overlay.style.zIndex = String(zIndex - 2);
|
|
103
|
-
document.body.appendChild(overlay);
|
|
104
|
-
}
|
|
105
|
-
// 创建高亮层
|
|
106
|
-
createGuideLight() {
|
|
107
|
-
const { zIndex } = this.component;
|
|
108
|
-
this.guideLight = new DynamicMountClass_1.default({
|
|
109
|
-
zIndex: zIndex - 1,
|
|
110
|
-
vueComponent: guideLight_vue_1.default,
|
|
111
|
-
componentProps: { _guideControl: this },
|
|
112
|
-
});
|
|
113
|
-
this.guideLight.on('mounted', (component) => {
|
|
114
|
-
});
|
|
115
|
-
this.guideLight.on('destroyed', () => {
|
|
116
|
-
});
|
|
117
|
-
this.guideLight.init();
|
|
118
|
-
}
|
|
119
|
-
/**
|
|
120
|
-
* 获取node节点
|
|
121
|
-
* @param element
|
|
122
|
-
*/
|
|
123
|
-
getGuideContentByElement(element) {
|
|
124
|
-
let node = null;
|
|
125
|
-
if (element.indexOf('#') === 0) {
|
|
126
|
-
node = document.getElementById(element.slice(1));
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
node = document.getElementsByClassName(element)[0];
|
|
130
|
-
}
|
|
131
|
-
return node;
|
|
132
|
-
}
|
|
133
|
-
// 创建引导内容
|
|
134
|
-
createGuideContent() {
|
|
135
|
-
const { zIndex } = this.component;
|
|
136
|
-
if (!this.guideContent) {
|
|
137
|
-
this.guideContent = new DynamicMountClass_1.default({
|
|
138
|
-
zIndex: zIndex,
|
|
139
|
-
vueComponent: guideContent_vue_1.default,
|
|
140
|
-
componentProps: { _guideControl: this },
|
|
141
|
-
});
|
|
142
|
-
this.guideContent.on('mounted', (component) => {
|
|
143
|
-
});
|
|
144
|
-
this.guideContent.on('destroyed', () => {
|
|
145
|
-
});
|
|
146
|
-
this.guideContent.init();
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
// 设置引导的位置
|
|
150
|
-
setGuideLightPosition(position) {
|
|
151
|
-
this.guideLightPosition = position;
|
|
152
|
-
}
|
|
153
|
-
// 获取操作按钮配置
|
|
154
|
-
getGuideHandleButtonConfig(value) {
|
|
155
|
-
const stepLength = this.steps.length;
|
|
156
|
-
if (value === 0 && stepLength > 1) {
|
|
157
|
-
return [
|
|
158
|
-
{ text: '跳过', type: 'info', click: this.onSkip },
|
|
159
|
-
{ text: '下一步', type: 'primary', click: this.onNextStepClick },
|
|
160
|
-
];
|
|
161
|
-
}
|
|
162
|
-
else if (value === stepLength - 1) {
|
|
163
|
-
if (stepLength === 1) {
|
|
164
|
-
return [
|
|
165
|
-
{ text: '跳过', type: 'info', click: this.onSkip },
|
|
166
|
-
{ text: '完成', type: 'primary', click: this.onFinish },
|
|
167
|
-
];
|
|
168
|
-
}
|
|
169
|
-
else {
|
|
170
|
-
return [
|
|
171
|
-
{ text: '上一步', type: 'info', click: this.onPrevStepClick },
|
|
172
|
-
{ text: '完成', type: 'primary', click: this.onFinish },
|
|
173
|
-
];
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
return [
|
|
178
|
-
{ text: '跳过', type: 'info', click: this.onSkip },
|
|
179
|
-
{ text: '上一步', type: 'info', click: this.onPrevStepClick },
|
|
180
|
-
{ text: '下一步', type: 'primary', click: this.onNextStepClick },
|
|
181
|
-
];
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
/**
|
|
185
|
-
* 需要判断是否是异步的下一步
|
|
186
|
-
*/
|
|
187
|
-
onBeforeNext() {
|
|
188
|
-
var _a;
|
|
189
|
-
let flag = true;
|
|
190
|
-
const steps = this.component.steps;
|
|
191
|
-
try {
|
|
192
|
-
const awaitFn = (_a = steps[this.current + 1]) === null || _a === void 0 ? void 0 : _a.awaitFn;
|
|
193
|
-
if (awaitFn) {
|
|
194
|
-
flag = false;
|
|
195
|
-
awaitFn(() => {
|
|
196
|
-
this.startNextStep();
|
|
197
|
-
}, this.current);
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
catch (error) {
|
|
201
|
-
}
|
|
202
|
-
return flag;
|
|
203
|
-
}
|
|
204
|
-
/**
|
|
205
|
-
* 开始下一步
|
|
206
|
-
*/
|
|
207
|
-
startNextStep() {
|
|
208
|
-
this.current += 1;
|
|
209
|
-
try {
|
|
210
|
-
this.component.onNextStepClick(this.current);
|
|
211
|
-
}
|
|
212
|
-
catch (error) {
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
beforeDestroy() {
|
|
216
|
-
try {
|
|
217
|
-
let node = document.getElementsByClassName('base-guide-overlay')[0];
|
|
218
|
-
document.body.removeChild(node);
|
|
219
|
-
}
|
|
220
|
-
catch (error) {
|
|
221
|
-
}
|
|
222
|
-
finally {
|
|
223
|
-
this.component.onDestroy();
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
destroyComponent() {
|
|
227
|
-
if (this.guideLight) {
|
|
228
|
-
let _guideLight = this.guideLight.getComponent();
|
|
229
|
-
_guideLight[`onDestroy`]();
|
|
230
|
-
}
|
|
231
|
-
if (this.guideContent) {
|
|
232
|
-
let _guideContent = this.guideContent.getComponent();
|
|
233
|
-
_guideContent[`onDestroy`]();
|
|
234
|
-
}
|
|
235
|
-
document.body.style.overflow = 'auto';
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
exports.default = GuideControl;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const guideContent_vue_1 = __importDefault(require("./guideContent.vue"));
|
|
7
|
+
const guideLight_vue_1 = __importDefault(require("./guideLight.vue"));
|
|
8
|
+
const DynamicMountClass_1 = __importDefault(require("../../dynamicmount/DynamicMountClass"));
|
|
9
|
+
class GuideControl {
|
|
10
|
+
constructor(defaultCurrent, steps, component) {
|
|
11
|
+
// 点击下一步的操作
|
|
12
|
+
this.onNextStepClick = () => {
|
|
13
|
+
const flag = this.onBeforeNext();
|
|
14
|
+
if (flag) {
|
|
15
|
+
this.startNextStep();
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
this.onPrevStepClick = (type = false) => {
|
|
19
|
+
let index = this.current - 1;
|
|
20
|
+
if (index === 0 && this.errorIds.size > 0 && type) {
|
|
21
|
+
this.onSkip();
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (this.errorIds.has(`${index}`)) {
|
|
25
|
+
this.current -= 1;
|
|
26
|
+
this.onPrevStepClick(true);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
this.current = index;
|
|
30
|
+
try {
|
|
31
|
+
this.component.onNextStepClick(this.current);
|
|
32
|
+
}
|
|
33
|
+
catch (error) {
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
this.onFinish = () => {
|
|
38
|
+
try {
|
|
39
|
+
this.component.onFinish(this.current);
|
|
40
|
+
}
|
|
41
|
+
catch (error) {
|
|
42
|
+
}
|
|
43
|
+
finally {
|
|
44
|
+
this.beforeDestroy();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
this.onSkip = () => {
|
|
48
|
+
try {
|
|
49
|
+
this.component.onSkip(this.current);
|
|
50
|
+
}
|
|
51
|
+
catch (error) {
|
|
52
|
+
}
|
|
53
|
+
finally {
|
|
54
|
+
this.beforeDestroy();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
this.isOverlay = true;
|
|
58
|
+
this.steps = steps;
|
|
59
|
+
this.show = false;
|
|
60
|
+
this.component = component;
|
|
61
|
+
this.current = defaultCurrent;
|
|
62
|
+
// guideLight 组件
|
|
63
|
+
this.guideLight = null;
|
|
64
|
+
// 引导组件的内容
|
|
65
|
+
this.guideContent = null;
|
|
66
|
+
// 引导需要展示的位置
|
|
67
|
+
this.guideLightPosition = null;
|
|
68
|
+
// 记录dom节点没有导致的引导错误的节点
|
|
69
|
+
this.errorIds = new Set();
|
|
70
|
+
}
|
|
71
|
+
onStartGuide() {
|
|
72
|
+
setTimeout(() => {
|
|
73
|
+
this.component.$on('hook:destroyed', () => {
|
|
74
|
+
this.destroyComponent();
|
|
75
|
+
});
|
|
76
|
+
this.show = true;
|
|
77
|
+
if (this.isOverlay) {
|
|
78
|
+
this.createGuideOverlay();
|
|
79
|
+
}
|
|
80
|
+
if (!this.guideLight) {
|
|
81
|
+
this.createGuideLight();
|
|
82
|
+
}
|
|
83
|
+
}, 500);
|
|
84
|
+
}
|
|
85
|
+
// 当dom节点不存在时,跳过改次引导
|
|
86
|
+
onDomError(index) {
|
|
87
|
+
this.errorIds.add(`${index}`);
|
|
88
|
+
let _index = this.current + 1;
|
|
89
|
+
if (_index == this.steps.length) {
|
|
90
|
+
this.onFinish();
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
this.current = _index;
|
|
94
|
+
this.onBeforeNext();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
// 创建遮罩层
|
|
98
|
+
createGuideOverlay() {
|
|
99
|
+
const { zIndex } = this.component;
|
|
100
|
+
let overlay = document.createElement('div');
|
|
101
|
+
overlay.setAttribute('class', 'base-guide-overlay');
|
|
102
|
+
overlay.style.zIndex = String(zIndex - 2);
|
|
103
|
+
document.body.appendChild(overlay);
|
|
104
|
+
}
|
|
105
|
+
// 创建高亮层
|
|
106
|
+
createGuideLight() {
|
|
107
|
+
const { zIndex } = this.component;
|
|
108
|
+
this.guideLight = new DynamicMountClass_1.default({
|
|
109
|
+
zIndex: zIndex - 1,
|
|
110
|
+
vueComponent: guideLight_vue_1.default,
|
|
111
|
+
componentProps: { _guideControl: this },
|
|
112
|
+
});
|
|
113
|
+
this.guideLight.on('mounted', (component) => {
|
|
114
|
+
});
|
|
115
|
+
this.guideLight.on('destroyed', () => {
|
|
116
|
+
});
|
|
117
|
+
this.guideLight.init();
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* 获取node节点
|
|
121
|
+
* @param element
|
|
122
|
+
*/
|
|
123
|
+
getGuideContentByElement(element) {
|
|
124
|
+
let node = null;
|
|
125
|
+
if (element.indexOf('#') === 0) {
|
|
126
|
+
node = document.getElementById(element.slice(1));
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
node = document.getElementsByClassName(element)[0];
|
|
130
|
+
}
|
|
131
|
+
return node;
|
|
132
|
+
}
|
|
133
|
+
// 创建引导内容
|
|
134
|
+
createGuideContent() {
|
|
135
|
+
const { zIndex } = this.component;
|
|
136
|
+
if (!this.guideContent) {
|
|
137
|
+
this.guideContent = new DynamicMountClass_1.default({
|
|
138
|
+
zIndex: zIndex,
|
|
139
|
+
vueComponent: guideContent_vue_1.default,
|
|
140
|
+
componentProps: { _guideControl: this },
|
|
141
|
+
});
|
|
142
|
+
this.guideContent.on('mounted', (component) => {
|
|
143
|
+
});
|
|
144
|
+
this.guideContent.on('destroyed', () => {
|
|
145
|
+
});
|
|
146
|
+
this.guideContent.init();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
// 设置引导的位置
|
|
150
|
+
setGuideLightPosition(position) {
|
|
151
|
+
this.guideLightPosition = position;
|
|
152
|
+
}
|
|
153
|
+
// 获取操作按钮配置
|
|
154
|
+
getGuideHandleButtonConfig(value) {
|
|
155
|
+
const stepLength = this.steps.length;
|
|
156
|
+
if (value === 0 && stepLength > 1) {
|
|
157
|
+
return [
|
|
158
|
+
{ text: '跳过', type: 'info', click: this.onSkip },
|
|
159
|
+
{ text: '下一步', type: 'primary', click: this.onNextStepClick },
|
|
160
|
+
];
|
|
161
|
+
}
|
|
162
|
+
else if (value === stepLength - 1) {
|
|
163
|
+
if (stepLength === 1) {
|
|
164
|
+
return [
|
|
165
|
+
{ text: '跳过', type: 'info', click: this.onSkip },
|
|
166
|
+
{ text: '完成', type: 'primary', click: this.onFinish },
|
|
167
|
+
];
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
return [
|
|
171
|
+
{ text: '上一步', type: 'info', click: this.onPrevStepClick },
|
|
172
|
+
{ text: '完成', type: 'primary', click: this.onFinish },
|
|
173
|
+
];
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
return [
|
|
178
|
+
{ text: '跳过', type: 'info', click: this.onSkip },
|
|
179
|
+
{ text: '上一步', type: 'info', click: this.onPrevStepClick },
|
|
180
|
+
{ text: '下一步', type: 'primary', click: this.onNextStepClick },
|
|
181
|
+
];
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* 需要判断是否是异步的下一步
|
|
186
|
+
*/
|
|
187
|
+
onBeforeNext() {
|
|
188
|
+
var _a;
|
|
189
|
+
let flag = true;
|
|
190
|
+
const steps = this.component.steps;
|
|
191
|
+
try {
|
|
192
|
+
const awaitFn = (_a = steps[this.current + 1]) === null || _a === void 0 ? void 0 : _a.awaitFn;
|
|
193
|
+
if (awaitFn) {
|
|
194
|
+
flag = false;
|
|
195
|
+
awaitFn(() => {
|
|
196
|
+
this.startNextStep();
|
|
197
|
+
}, this.current);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
catch (error) {
|
|
201
|
+
}
|
|
202
|
+
return flag;
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* 开始下一步
|
|
206
|
+
*/
|
|
207
|
+
startNextStep() {
|
|
208
|
+
this.current += 1;
|
|
209
|
+
try {
|
|
210
|
+
this.component.onNextStepClick(this.current);
|
|
211
|
+
}
|
|
212
|
+
catch (error) {
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
beforeDestroy() {
|
|
216
|
+
try {
|
|
217
|
+
let node = document.getElementsByClassName('base-guide-overlay')[0];
|
|
218
|
+
document.body.removeChild(node);
|
|
219
|
+
}
|
|
220
|
+
catch (error) {
|
|
221
|
+
}
|
|
222
|
+
finally {
|
|
223
|
+
this.component.onDestroy();
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
destroyComponent() {
|
|
227
|
+
if (this.guideLight) {
|
|
228
|
+
let _guideLight = this.guideLight.getComponent();
|
|
229
|
+
_guideLight[`onDestroy`]();
|
|
230
|
+
}
|
|
231
|
+
if (this.guideContent) {
|
|
232
|
+
let _guideContent = this.guideContent.getComponent();
|
|
233
|
+
_guideContent[`onDestroy`]();
|
|
234
|
+
}
|
|
235
|
+
document.body.style.overflow = 'auto';
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
exports.default = GuideControl;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { DynamicMountInterface, DynamicMountParams } from "../../typings/type";
|
|
2
|
-
declare class DynamicMountClass implements DynamicMountInterface {
|
|
3
|
-
destroyCb: null | Function;
|
|
4
|
-
mountdCb: null | Function;
|
|
5
|
-
domComponent: any;
|
|
6
|
-
params: DynamicMountParams;
|
|
7
|
-
refComponent: any;
|
|
8
|
-
constructor(dynamicMount: any);
|
|
9
|
-
init(): void;
|
|
10
|
-
getComponent(): object;
|
|
11
|
-
on(type: 'mounted' | 'destroyed', cb: Function): void;
|
|
12
|
-
private mounted;
|
|
13
|
-
private destroy;
|
|
14
|
-
}
|
|
15
|
-
export default DynamicMountClass;
|
|
1
|
+
import { DynamicMountInterface, DynamicMountParams } from "../../typings/type";
|
|
2
|
+
declare class DynamicMountClass implements DynamicMountInterface {
|
|
3
|
+
destroyCb: null | Function;
|
|
4
|
+
mountdCb: null | Function;
|
|
5
|
+
domComponent: any;
|
|
6
|
+
params: DynamicMountParams;
|
|
7
|
+
refComponent: any;
|
|
8
|
+
constructor(dynamicMount: any);
|
|
9
|
+
init(): void;
|
|
10
|
+
getComponent(): object;
|
|
11
|
+
on(type: 'mounted' | 'destroyed', cb: Function): void;
|
|
12
|
+
private mounted;
|
|
13
|
+
private destroy;
|
|
14
|
+
}
|
|
15
|
+
export default DynamicMountClass;
|
|
16
16
|
//# sourceMappingURL=DynamicMountClass.d.ts.map
|