meixioacomponent 2.0.59 → 2.0.60
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 -111
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +244 -250
- 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 +45 -45
- 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 +23649 -24907
- package/lib/meixioacomponent.umd.js +23678 -24936
- package/lib/meixioacomponent.umd.min.js +3 -3
- package/lib/plugin/PluginByReferenceByOss.d.ts +1 -1
- package/lib/plugin/PluginByReferenceByOss.js +16 -16
- 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 +2 -2
- 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/baseDrawer/index.vue +1 -1
- 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/baseStoreSelect/index.vue +1 -1
- package/packages/components/base/baseTimeRangePicker/baseTimeRangePicker.vue +59 -59
- package/packages/components/base/baseTimeRangePicker/index.js +7 -7
- package/packages/components/base/baseToggle/toggle.vue +9 -8
- package/packages/components/base/tDateRangePicker/index.js +5 -5
- package/packages/components/base/tDateRangePicker/tDateRangePicker.vue +102 -111
- 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 -247
- package/packages/components/index.ts +5 -13
- package/packages/components/mixins/mixinsByBaseArea.js +53 -53
- package/packages/components/mixins/tableSectionMixins.js +0 -1
- package/packages/components/proPageTable/oa_pro_table.vue +1 -1
- 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 +46 -46
- 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 -16
- package/packages/plugin/PluginByReferenceByOss.ts +11 -11
- package/packages/typings/type.js +2 -2
- package/packages/useType/useType.js +90 -90
- package/packages/utils/utils.js +14 -1
- package/tsconfig.json +3 -3
- package/lib/config/TransferTDComponent.d.ts +0 -2
- package/lib/config/TransferTDComponent.d.ts.map +0 -1
- package/lib/config/TransferTDComponent.js +0 -31
- package/packages/components/base/tInput/index.js +0 -6
- package/packages/components/base/tInput/tInput.vue +0 -149
- package/packages/components/base/tInputNumber/index.js +0 -6
- package/packages/components/base/tInputNumber/tInputNumber.vue +0 -104
- package/packages/components/base/tSelect/index.js +0 -0
- package/packages/components/base/tSelect/tSelect.vue +0 -176
- package/packages/config/TransferTDComponent.js +0 -31
- package/packages/config/TransferTDComponent.ts +0 -23
package/lib/typings/type.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
package/lib/useType/useType.d.ts
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { FormItemInputParam, FormItemNumberParam, FormItemRadioParam, FormItemSelectParam, FormItemSingleUploadParam, FormItemTextareaParam, FormItemTimeParam, PlainTableParamsType, ProTableParamsType, TableProScreenInterFace } from "../typings/type";
|
|
2
|
-
/**
|
|
3
|
-
* pro/plain表格的表头配置
|
|
4
|
-
*/
|
|
5
|
-
export declare const useTableColumnParamsType: () => {
|
|
6
|
-
/**
|
|
7
|
-
* 页面表格的头部配置
|
|
8
|
-
*/
|
|
9
|
-
useTypeByProTableParams: (paramsList: ProTableParamsType[]) => ProTableParamsType[];
|
|
10
|
-
/**
|
|
11
|
-
* plain表格的头部配置
|
|
12
|
-
*/
|
|
13
|
-
useTypeByPlainTableParams: (paramsList: PlainTableParamsType[]) => PlainTableParamsType[];
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* form表单的各个类型的配置
|
|
17
|
-
*/
|
|
18
|
-
export declare const useFormItemParamsType: () => {
|
|
19
|
-
useTypeByInputFormItem: (params: FormItemInputParam) => FormItemInputParam;
|
|
20
|
-
useTypeTextareaFormItem: (params: FormItemTextareaParam) => FormItemTextareaParam;
|
|
21
|
-
useTypeNumberFormItem: (params: FormItemNumberParam) => FormItemNumberParam;
|
|
22
|
-
useTypeSelectFormItem: (params: FormItemSelectParam) => FormItemSelectParam;
|
|
23
|
-
useTypeTimeFormItem: (params: FormItemTimeParam) => FormItemTimeParam;
|
|
24
|
-
useTypeRadioFormItem: (params: FormItemRadioParam) => FormItemRadioParam;
|
|
25
|
-
useTypeSingleUploadFormItem: (params: FormItemSingleUploadParam) => FormItemSingleUploadParam;
|
|
26
|
-
};
|
|
27
|
-
export declare const useProScreenParamsItem: (proScreenItem: TableProScreenInterFace, auth?: boolean) => TableProScreenInterFace | null;
|
|
1
|
+
import { FormItemInputParam, FormItemNumberParam, FormItemRadioParam, FormItemSelectParam, FormItemSingleUploadParam, FormItemTextareaParam, FormItemTimeParam, PlainTableParamsType, ProTableParamsType, TableProScreenInterFace } from "../typings/type";
|
|
2
|
+
/**
|
|
3
|
+
* pro/plain表格的表头配置
|
|
4
|
+
*/
|
|
5
|
+
export declare const useTableColumnParamsType: () => {
|
|
6
|
+
/**
|
|
7
|
+
* 页面表格的头部配置
|
|
8
|
+
*/
|
|
9
|
+
useTypeByProTableParams: (paramsList: ProTableParamsType[]) => ProTableParamsType[];
|
|
10
|
+
/**
|
|
11
|
+
* plain表格的头部配置
|
|
12
|
+
*/
|
|
13
|
+
useTypeByPlainTableParams: (paramsList: PlainTableParamsType[]) => PlainTableParamsType[];
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* form表单的各个类型的配置
|
|
17
|
+
*/
|
|
18
|
+
export declare const useFormItemParamsType: () => {
|
|
19
|
+
useTypeByInputFormItem: (params: FormItemInputParam) => FormItemInputParam;
|
|
20
|
+
useTypeTextareaFormItem: (params: FormItemTextareaParam) => FormItemTextareaParam;
|
|
21
|
+
useTypeNumberFormItem: (params: FormItemNumberParam) => FormItemNumberParam;
|
|
22
|
+
useTypeSelectFormItem: (params: FormItemSelectParam) => FormItemSelectParam;
|
|
23
|
+
useTypeTimeFormItem: (params: FormItemTimeParam) => FormItemTimeParam;
|
|
24
|
+
useTypeRadioFormItem: (params: FormItemRadioParam) => FormItemRadioParam;
|
|
25
|
+
useTypeSingleUploadFormItem: (params: FormItemSingleUploadParam) => FormItemSingleUploadParam;
|
|
26
|
+
};
|
|
27
|
+
export declare const useProScreenParamsItem: (proScreenItem: TableProScreenInterFace, auth?: boolean) => TableProScreenInterFace | null;
|
|
28
28
|
//# sourceMappingURL=useType.d.ts.map
|
package/lib/useType/useType.js
CHANGED
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useProScreenParamsItem = exports.useFormItemParamsType = exports.useTableColumnParamsType = void 0;
|
|
4
|
-
/**
|
|
5
|
-
*
|
|
6
|
-
* @param paramsList
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
const useTypeByProTableParams = (paramsList) => {
|
|
10
|
-
return paramsList;
|
|
11
|
-
};
|
|
12
|
-
//普通表格的单列的配置
|
|
13
|
-
const useTypeByPlainTableParams = (paramsList) => {
|
|
14
|
-
return paramsList;
|
|
15
|
-
};
|
|
16
|
-
// form表单的配置类型
|
|
17
|
-
//input 类型
|
|
18
|
-
const useTypeByInputFormItem = (params) => {
|
|
19
|
-
return params;
|
|
20
|
-
};
|
|
21
|
-
// textarea 类型
|
|
22
|
-
const useTypeTextareaFormItem = (params) => {
|
|
23
|
-
return params;
|
|
24
|
-
};
|
|
25
|
-
// number 类型
|
|
26
|
-
const useTypeNumberFormItem = (params) => {
|
|
27
|
-
return params;
|
|
28
|
-
};
|
|
29
|
-
// select 类型
|
|
30
|
-
const useTypeSelectFormItem = (params) => {
|
|
31
|
-
return params;
|
|
32
|
-
};
|
|
33
|
-
// 时间类型 类型
|
|
34
|
-
const useTypeTimeFormItem = (params) => {
|
|
35
|
-
return params;
|
|
36
|
-
};
|
|
37
|
-
// radio单选框 类型
|
|
38
|
-
const useTypeRadioFormItem = (params) => {
|
|
39
|
-
return params;
|
|
40
|
-
};
|
|
41
|
-
// 单文件上传 类型
|
|
42
|
-
const useTypeSingleUploadFormItem = (params) => {
|
|
43
|
-
return params;
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* pro/plain表格的表头配置
|
|
47
|
-
*/
|
|
48
|
-
const useTableColumnParamsType = () => {
|
|
49
|
-
return {
|
|
50
|
-
/**
|
|
51
|
-
* 页面表格的头部配置
|
|
52
|
-
*/
|
|
53
|
-
useTypeByProTableParams,
|
|
54
|
-
/**
|
|
55
|
-
* plain表格的头部配置
|
|
56
|
-
*/
|
|
57
|
-
useTypeByPlainTableParams,
|
|
58
|
-
};
|
|
59
|
-
};
|
|
60
|
-
exports.useTableColumnParamsType = useTableColumnParamsType;
|
|
61
|
-
/**
|
|
62
|
-
* form表单的各个类型的配置
|
|
63
|
-
*/
|
|
64
|
-
const useFormItemParamsType = () => {
|
|
65
|
-
return {
|
|
66
|
-
//表单类型为input类型
|
|
67
|
-
useTypeByInputFormItem,
|
|
68
|
-
//表单类型为文本域
|
|
69
|
-
useTypeTextareaFormItem,
|
|
70
|
-
// 数字类型
|
|
71
|
-
useTypeNumberFormItem,
|
|
72
|
-
// 下拉菜单
|
|
73
|
-
useTypeSelectFormItem,
|
|
74
|
-
// 时间类型
|
|
75
|
-
useTypeTimeFormItem,
|
|
76
|
-
// 单选框
|
|
77
|
-
useTypeRadioFormItem,
|
|
78
|
-
// 单文件上传
|
|
79
|
-
useTypeSingleUploadFormItem,
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
|
-
exports.useFormItemParamsType = useFormItemParamsType;
|
|
83
|
-
const useProScreenParamsItem = (proScreenItem, auth = true) => {
|
|
84
|
-
if (auth) {
|
|
85
|
-
return proScreenItem;
|
|
86
|
-
}
|
|
87
|
-
return null;
|
|
88
|
-
};
|
|
89
|
-
exports.useProScreenParamsItem = useProScreenParamsItem;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useProScreenParamsItem = exports.useFormItemParamsType = exports.useTableColumnParamsType = void 0;
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* @param paramsList
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
const useTypeByProTableParams = (paramsList) => {
|
|
10
|
+
return paramsList;
|
|
11
|
+
};
|
|
12
|
+
//普通表格的单列的配置
|
|
13
|
+
const useTypeByPlainTableParams = (paramsList) => {
|
|
14
|
+
return paramsList;
|
|
15
|
+
};
|
|
16
|
+
// form表单的配置类型
|
|
17
|
+
//input 类型
|
|
18
|
+
const useTypeByInputFormItem = (params) => {
|
|
19
|
+
return params;
|
|
20
|
+
};
|
|
21
|
+
// textarea 类型
|
|
22
|
+
const useTypeTextareaFormItem = (params) => {
|
|
23
|
+
return params;
|
|
24
|
+
};
|
|
25
|
+
// number 类型
|
|
26
|
+
const useTypeNumberFormItem = (params) => {
|
|
27
|
+
return params;
|
|
28
|
+
};
|
|
29
|
+
// select 类型
|
|
30
|
+
const useTypeSelectFormItem = (params) => {
|
|
31
|
+
return params;
|
|
32
|
+
};
|
|
33
|
+
// 时间类型 类型
|
|
34
|
+
const useTypeTimeFormItem = (params) => {
|
|
35
|
+
return params;
|
|
36
|
+
};
|
|
37
|
+
// radio单选框 类型
|
|
38
|
+
const useTypeRadioFormItem = (params) => {
|
|
39
|
+
return params;
|
|
40
|
+
};
|
|
41
|
+
// 单文件上传 类型
|
|
42
|
+
const useTypeSingleUploadFormItem = (params) => {
|
|
43
|
+
return params;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* pro/plain表格的表头配置
|
|
47
|
+
*/
|
|
48
|
+
const useTableColumnParamsType = () => {
|
|
49
|
+
return {
|
|
50
|
+
/**
|
|
51
|
+
* 页面表格的头部配置
|
|
52
|
+
*/
|
|
53
|
+
useTypeByProTableParams,
|
|
54
|
+
/**
|
|
55
|
+
* plain表格的头部配置
|
|
56
|
+
*/
|
|
57
|
+
useTypeByPlainTableParams,
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
exports.useTableColumnParamsType = useTableColumnParamsType;
|
|
61
|
+
/**
|
|
62
|
+
* form表单的各个类型的配置
|
|
63
|
+
*/
|
|
64
|
+
const useFormItemParamsType = () => {
|
|
65
|
+
return {
|
|
66
|
+
//表单类型为input类型
|
|
67
|
+
useTypeByInputFormItem,
|
|
68
|
+
//表单类型为文本域
|
|
69
|
+
useTypeTextareaFormItem,
|
|
70
|
+
// 数字类型
|
|
71
|
+
useTypeNumberFormItem,
|
|
72
|
+
// 下拉菜单
|
|
73
|
+
useTypeSelectFormItem,
|
|
74
|
+
// 时间类型
|
|
75
|
+
useTypeTimeFormItem,
|
|
76
|
+
// 单选框
|
|
77
|
+
useTypeRadioFormItem,
|
|
78
|
+
// 单文件上传
|
|
79
|
+
useTypeSingleUploadFormItem,
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
exports.useFormItemParamsType = useFormItemParamsType;
|
|
83
|
+
const useProScreenParamsItem = (proScreenItem, auth = true) => {
|
|
84
|
+
if (auth) {
|
|
85
|
+
return proScreenItem;
|
|
86
|
+
}
|
|
87
|
+
return null;
|
|
88
|
+
};
|
|
89
|
+
exports.useProScreenParamsItem = useProScreenParamsItem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meixioacomponent",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.60",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve": "vue-cli-service serve",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"node-polyfill-webpack-plugin": "^2.0.1",
|
|
32
32
|
"npm": "^9.6.1",
|
|
33
33
|
"path-browserify": "^1.0.1",
|
|
34
|
-
"tdesign-vue": "^1.
|
|
34
|
+
"tdesign-vue": "^1.10.5-naruto",
|
|
35
35
|
"ts-loader": "^9.4.2",
|
|
36
36
|
"tslint": "^6.1.3",
|
|
37
37
|
"tslint-config-standard": "^9.0.0",
|
|
@@ -1,168 +1,168 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ol class="base-anchor-wrap">
|
|
3
|
-
<li
|
|
4
|
-
v-for="(item, index) in list"
|
|
5
|
-
:key="index"
|
|
6
|
-
:class="{
|
|
7
|
-
active: index === active,
|
|
8
|
-
}"
|
|
9
|
-
class="anchor-item-wrap"
|
|
10
|
-
>
|
|
11
|
-
<a
|
|
12
|
-
v-if="type === 'page'"
|
|
13
|
-
:href="`${currentPath}#${item.id}`"
|
|
14
|
-
@click="aTagClick(index)"
|
|
15
|
-
>
|
|
16
|
-
{{ item.title }}
|
|
17
|
-
</a>
|
|
18
|
-
<span v-else @click="toSetScrollTop(index)">{{ item.title }}</span>
|
|
19
|
-
</li>
|
|
20
|
-
</ol>
|
|
21
|
-
</template>
|
|
22
|
-
|
|
23
|
-
<script>
|
|
24
|
-
|
|
25
|
-
export default {
|
|
26
|
-
name: 'baseAnchor',
|
|
27
|
-
data() {
|
|
28
|
-
return {
|
|
29
|
-
active: 0,
|
|
30
|
-
_listenElement: null,
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
mounted() {
|
|
34
|
-
this.$nextTick(() => {
|
|
35
|
-
this.init()
|
|
36
|
-
})
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
beforeDestroy() {
|
|
40
|
-
this._listenElement?.removeEventListener('scroll', this.listenScroll)
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
props: {
|
|
44
|
-
listenElementId: {
|
|
45
|
-
//只接受id
|
|
46
|
-
type: String,
|
|
47
|
-
},
|
|
48
|
-
list: {
|
|
49
|
-
type: Array,
|
|
50
|
-
},
|
|
51
|
-
type: {
|
|
52
|
-
type: String,
|
|
53
|
-
default: 'page',
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
computed: {
|
|
57
|
-
currentPath() {
|
|
58
|
-
return this.$route.path
|
|
59
|
-
},
|
|
60
|
-
},
|
|
61
|
-
methods: {
|
|
62
|
-
init() {
|
|
63
|
-
let type = this.$props.type
|
|
64
|
-
if (type == 'page') {
|
|
65
|
-
this._listenElement = document.getElementsByClassName(
|
|
66
|
-
'layout-contnet',
|
|
67
|
-
)[0]
|
|
68
|
-
this._listenElement?.addEventListener('scroll', this.listenScroll)
|
|
69
|
-
} else {
|
|
70
|
-
this._listenElement = document.getElementById(
|
|
71
|
-
`${this.$props.listenElementId}`,
|
|
72
|
-
)
|
|
73
|
-
this.$nextTick(() => {
|
|
74
|
-
this._listenElement?.addEventListener('scroll', (e) => {
|
|
75
|
-
this.listenScroll(e)
|
|
76
|
-
})
|
|
77
|
-
})
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
aTagClick(index) {
|
|
81
|
-
this.active = index
|
|
82
|
-
},
|
|
83
|
-
listenScroll(e) {
|
|
84
|
-
if (this.$props.list.length <= 0) return
|
|
85
|
-
let type = this.$props.type
|
|
86
|
-
let scrollTop = e.target.scrollTop
|
|
87
|
-
for (let i = 0; i < this.$props.list.length; i++) {
|
|
88
|
-
let item = this.$props.list[i]
|
|
89
|
-
let node = null
|
|
90
|
-
// 类型
|
|
91
|
-
if (type == 'page') {
|
|
92
|
-
// page 代表是全局 监听 layout 的滚动
|
|
93
|
-
node = document.getElementById(item.id)
|
|
94
|
-
} else {
|
|
95
|
-
// 指定的容器
|
|
96
|
-
node = this._listenElement.querySelector(`#${item.id}`)
|
|
97
|
-
}
|
|
98
|
-
// 滑动到底部直接赋值
|
|
99
|
-
if (scrollTop + e.target.clientHeight >= e.target.scrollHeight - 5) {
|
|
100
|
-
this.active = this.$props.list.length - 1
|
|
101
|
-
break
|
|
102
|
-
}
|
|
103
|
-
// 如果循环到最后一个dom也直接赋值
|
|
104
|
-
if (i == this.$props.list.length - 1) {
|
|
105
|
-
this.active = i
|
|
106
|
-
break
|
|
107
|
-
} else {
|
|
108
|
-
let nextItem = this.$props.list[i + 1]
|
|
109
|
-
let nextNode = null
|
|
110
|
-
if (type == 'page') {
|
|
111
|
-
nextNode = document.getElementById(nextItem.id)
|
|
112
|
-
} else {
|
|
113
|
-
nextNode = this._listenElement.querySelector(`#${nextItem.id}`)
|
|
114
|
-
}
|
|
115
|
-
// 判单scrolltop是否小于下一个dom的高度
|
|
116
|
-
if (scrollTop < nextNode.offsetTop) {
|
|
117
|
-
this.active = i
|
|
118
|
-
break
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
toSetScrollTop(index) {
|
|
124
|
-
if (index == this.active) {
|
|
125
|
-
return
|
|
126
|
-
}
|
|
127
|
-
let id = this.$props.list[index].id
|
|
128
|
-
let dom = this._listenElement.querySelector(`#${id}`)
|
|
129
|
-
if (dom) {
|
|
130
|
-
dom.scrollIntoView(true)
|
|
131
|
-
setTimeout(() => {
|
|
132
|
-
this.aTagClick(index)
|
|
133
|
-
}, 10)
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
},
|
|
137
|
-
}
|
|
138
|
-
</script>
|
|
139
|
-
|
|
140
|
-
<style lang="less" scoped>
|
|
141
|
-
.base-anchor-wrap {
|
|
142
|
-
width: auto;
|
|
143
|
-
height: auto;
|
|
144
|
-
overflow-y: auto;
|
|
145
|
-
|
|
146
|
-
.anchor-item-wrap {
|
|
147
|
-
padding-left: calc(var(--padding-4) * 2);
|
|
148
|
-
border-left: 2px solid var(--color-border);
|
|
149
|
-
|
|
150
|
-
a,
|
|
151
|
-
span {
|
|
152
|
-
display: inline-block;
|
|
153
|
-
color: var(--font-color-m);
|
|
154
|
-
margin: var(--margin-2) 0px;
|
|
155
|
-
font-size: var(--font-size-base);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
span {
|
|
159
|
-
cursor: pointer;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.active {
|
|
164
|
-
border-left: 2px solid var(--color-primary);
|
|
165
|
-
color: var(--color-primary) !important;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<ol class="base-anchor-wrap">
|
|
3
|
+
<li
|
|
4
|
+
v-for="(item, index) in list"
|
|
5
|
+
:key="index"
|
|
6
|
+
:class="{
|
|
7
|
+
active: index === active,
|
|
8
|
+
}"
|
|
9
|
+
class="anchor-item-wrap"
|
|
10
|
+
>
|
|
11
|
+
<a
|
|
12
|
+
v-if="type === 'page'"
|
|
13
|
+
:href="`${currentPath}#${item.id}`"
|
|
14
|
+
@click="aTagClick(index)"
|
|
15
|
+
>
|
|
16
|
+
{{ item.title }}
|
|
17
|
+
</a>
|
|
18
|
+
<span v-else @click="toSetScrollTop(index)">{{ item.title }}</span>
|
|
19
|
+
</li>
|
|
20
|
+
</ol>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
|
|
25
|
+
export default {
|
|
26
|
+
name: 'baseAnchor',
|
|
27
|
+
data() {
|
|
28
|
+
return {
|
|
29
|
+
active: 0,
|
|
30
|
+
_listenElement: null,
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
mounted() {
|
|
34
|
+
this.$nextTick(() => {
|
|
35
|
+
this.init()
|
|
36
|
+
})
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
beforeDestroy() {
|
|
40
|
+
this._listenElement?.removeEventListener('scroll', this.listenScroll)
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
props: {
|
|
44
|
+
listenElementId: {
|
|
45
|
+
//只接受id
|
|
46
|
+
type: String,
|
|
47
|
+
},
|
|
48
|
+
list: {
|
|
49
|
+
type: Array,
|
|
50
|
+
},
|
|
51
|
+
type: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: 'page',
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
computed: {
|
|
57
|
+
currentPath() {
|
|
58
|
+
return this.$route.path
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
methods: {
|
|
62
|
+
init() {
|
|
63
|
+
let type = this.$props.type
|
|
64
|
+
if (type == 'page') {
|
|
65
|
+
this._listenElement = document.getElementsByClassName(
|
|
66
|
+
'layout-contnet',
|
|
67
|
+
)[0]
|
|
68
|
+
this._listenElement?.addEventListener('scroll', this.listenScroll)
|
|
69
|
+
} else {
|
|
70
|
+
this._listenElement = document.getElementById(
|
|
71
|
+
`${this.$props.listenElementId}`,
|
|
72
|
+
)
|
|
73
|
+
this.$nextTick(() => {
|
|
74
|
+
this._listenElement?.addEventListener('scroll', (e) => {
|
|
75
|
+
this.listenScroll(e)
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
aTagClick(index) {
|
|
81
|
+
this.active = index
|
|
82
|
+
},
|
|
83
|
+
listenScroll(e) {
|
|
84
|
+
if (this.$props.list.length <= 0) return
|
|
85
|
+
let type = this.$props.type
|
|
86
|
+
let scrollTop = e.target.scrollTop
|
|
87
|
+
for (let i = 0; i < this.$props.list.length; i++) {
|
|
88
|
+
let item = this.$props.list[i]
|
|
89
|
+
let node = null
|
|
90
|
+
// 类型
|
|
91
|
+
if (type == 'page') {
|
|
92
|
+
// page 代表是全局 监听 layout 的滚动
|
|
93
|
+
node = document.getElementById(item.id)
|
|
94
|
+
} else {
|
|
95
|
+
// 指定的容器
|
|
96
|
+
node = this._listenElement.querySelector(`#${item.id}`)
|
|
97
|
+
}
|
|
98
|
+
// 滑动到底部直接赋值
|
|
99
|
+
if (scrollTop + e.target.clientHeight >= e.target.scrollHeight - 5) {
|
|
100
|
+
this.active = this.$props.list.length - 1
|
|
101
|
+
break
|
|
102
|
+
}
|
|
103
|
+
// 如果循环到最后一个dom也直接赋值
|
|
104
|
+
if (i == this.$props.list.length - 1) {
|
|
105
|
+
this.active = i
|
|
106
|
+
break
|
|
107
|
+
} else {
|
|
108
|
+
let nextItem = this.$props.list[i + 1]
|
|
109
|
+
let nextNode = null
|
|
110
|
+
if (type == 'page') {
|
|
111
|
+
nextNode = document.getElementById(nextItem.id)
|
|
112
|
+
} else {
|
|
113
|
+
nextNode = this._listenElement.querySelector(`#${nextItem.id}`)
|
|
114
|
+
}
|
|
115
|
+
// 判单scrolltop是否小于下一个dom的高度
|
|
116
|
+
if (scrollTop < nextNode.offsetTop) {
|
|
117
|
+
this.active = i
|
|
118
|
+
break
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
toSetScrollTop(index) {
|
|
124
|
+
if (index == this.active) {
|
|
125
|
+
return
|
|
126
|
+
}
|
|
127
|
+
let id = this.$props.list[index].id
|
|
128
|
+
let dom = this._listenElement.querySelector(`#${id}`)
|
|
129
|
+
if (dom) {
|
|
130
|
+
dom.scrollIntoView(true)
|
|
131
|
+
setTimeout(() => {
|
|
132
|
+
this.aTagClick(index)
|
|
133
|
+
}, 10)
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
},
|
|
137
|
+
}
|
|
138
|
+
</script>
|
|
139
|
+
|
|
140
|
+
<style lang="less" scoped>
|
|
141
|
+
.base-anchor-wrap {
|
|
142
|
+
width: auto;
|
|
143
|
+
height: auto;
|
|
144
|
+
overflow-y: auto;
|
|
145
|
+
|
|
146
|
+
.anchor-item-wrap {
|
|
147
|
+
padding-left: calc(var(--padding-4) * 2);
|
|
148
|
+
border-left: 2px solid var(--color-border);
|
|
149
|
+
|
|
150
|
+
a,
|
|
151
|
+
span {
|
|
152
|
+
display: inline-block;
|
|
153
|
+
color: var(--font-color-m);
|
|
154
|
+
margin: var(--margin-2) 0px;
|
|
155
|
+
font-size: var(--font-size-base);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
span {
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.active {
|
|
164
|
+
border-left: 2px solid var(--color-primary);
|
|
165
|
+
color: var(--color-primary) !important;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
</style>
|