t20-common-lib 0.9.2 → 0.9.3
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/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="flex-column
|
|
2
|
+
<div class="flex-column main-page">
|
|
3
3
|
<div v-if="$slots.header" class="header">
|
|
4
4
|
<slot name="header"></slot>
|
|
5
5
|
</div>
|
|
6
6
|
<div v-if="$slots.card || $slots.tab" style="position: relative;">
|
|
7
7
|
<slot name="card"></slot>
|
|
8
|
-
<div
|
|
8
|
+
<div class="tab" v-if="$slots.tab">
|
|
9
9
|
<slot name="tab"></slot>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
@@ -22,15 +22,11 @@ export default {
|
|
|
22
22
|
</script>
|
|
23
23
|
|
|
24
24
|
<style lang="scss" scoped>
|
|
25
|
-
.
|
|
25
|
+
.tab {
|
|
26
26
|
position: absolute;
|
|
27
27
|
bottom: -40px;
|
|
28
28
|
left: 8px;
|
|
29
29
|
}
|
|
30
|
-
.tab2 {
|
|
31
|
-
position: absolute;
|
|
32
|
-
bottom: -34px;
|
|
33
|
-
}
|
|
34
30
|
|
|
35
31
|
.bg-white {
|
|
36
32
|
background-color: #fff !important;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex-column" :class="rootClasses">
|
|
3
|
+
<div v-if="hasHeader" class="header">
|
|
4
|
+
<slot name="back"></slot>
|
|
5
|
+
<slot name="unit"></slot>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-if="$slots.tab" class="tab-container">
|
|
8
|
+
<div class="tab" :class="tabClasses">
|
|
9
|
+
<slot name="tab"></slot>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="content-wrapper flex-1 overflow" :class="contentClasses">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: 'TabPage',
|
|
21
|
+
props: {
|
|
22
|
+
level: {
|
|
23
|
+
type: Number,
|
|
24
|
+
default: 1
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
computed: {
|
|
28
|
+
hasUnitSlot() {
|
|
29
|
+
return !!this.$slots.unit;
|
|
30
|
+
},
|
|
31
|
+
hasHeader() {
|
|
32
|
+
return !!this.$slots.back || this.hasUnitSlot;
|
|
33
|
+
},
|
|
34
|
+
rootClasses() {
|
|
35
|
+
return {
|
|
36
|
+
tabPage: this.hasUnitSlot,
|
|
37
|
+
'level2-content': this.level === 2
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
tabClasses() {
|
|
41
|
+
return {
|
|
42
|
+
level1: this.level === 1 && this.hasUnitSlot,
|
|
43
|
+
level2: !(this.level === 1 && this.hasUnitSlot)
|
|
44
|
+
};
|
|
45
|
+
},
|
|
46
|
+
contentClasses() {
|
|
47
|
+
return {
|
|
48
|
+
'px-8': this.hasUnitSlot,
|
|
49
|
+
'bg-white': true
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<style lang="scss" scoped>
|
|
57
|
+
.tabPage {
|
|
58
|
+
padding: 0 !important; // 建议审查 !important 的必要性，优先通过提升选择器权重解决样式覆盖问题
|
|
59
|
+
background: #f0f2f5;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.header {
|
|
63
|
+
height: 32px;
|
|
64
|
+
line-height: 32px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.tab-container {
|
|
68
|
+
position: relative;
|
|
69
|
+
height: 0; // 容器不占位
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.tab {
|
|
73
|
+
position: absolute;
|
|
74
|
+
bottom: -34px;
|
|
75
|
+
z-index: 1; // 确保 tab 在内容区域之上
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.tabPage .tab {
|
|
79
|
+
bottom: -42px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.level1 {
|
|
83
|
+
padding-left: 8px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.level2 {
|
|
87
|
+
// 可以保留为空或添加 level2 的特定样式
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.content-wrapper {
|
|
91
|
+
position: relative; // 确保内容在 tab 下方
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.level2-content {
|
|
95
|
+
height: calc(100% - 34px);
|
|
96
|
+
margin-top: 34px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.bg-white {
|
|
100
|
+
background-color: #fff !important; // 建议审查 !important 的必要性
|
|
101
|
+
}
|
|
102
|
+
</style>
|
package/src/index.js
CHANGED
|
@@ -13,6 +13,7 @@ import PageHeader from '../packages/page-header/index.js'
|
|
|
13
13
|
import CommonCollapse from '../packages/common-collapse/index.js'
|
|
14
14
|
import MultiCurrencyStatistics from '../packages/multi-currency-statistics/index.js'
|
|
15
15
|
import BranchBankSelect from '../packages/branch-bank-select/index.js'
|
|
16
|
+
import TabPage from '../packages/tab-page/index.js'
|
|
16
17
|
|
|
17
18
|
// 存储组件列表
|
|
18
19
|
const components = [
|
|
@@ -60,6 +61,7 @@ export {
|
|
|
60
61
|
CommonCollapse,
|
|
61
62
|
TabPane,
|
|
62
63
|
PageHeader,
|
|
64
|
+
TabPage,
|
|
63
65
|
MultiCurrencyStatistics,
|
|
64
66
|
BranchBankSelect,
|
|
65
67
|
repairEl,
|