meixioacomponent 2.0.45 → 2.0.47
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 +242 -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 +23005 -22961
- package/lib/meixioacomponent.umd.js +23123 -23079
- package/lib/meixioacomponent.umd.min.js +3 -3
- package/lib/style/tableStyle.less +5 -5
- 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/baseText/index.vue +4 -4
- 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 +59 -13
- 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 +239 -239
- package/packages/components/index.ts +0 -2
- package/packages/components/mixins/mixinsByBaseArea.js +53 -53
- package/packages/components/proPageTable/oa_pro_table.vue +13 -13
- package/packages/components/searchHeader/searchHeader.vue +2 -2
- package/packages/components/style/tableStyle.less +5 -5
- 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/typings/type.js +2 -2
- package/packages/useType/useType.js +90 -90
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,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>
|