wl-design-mobile 0.8.18 → 0.8.19
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/btn/lambo-btn-divide.vue +93 -8
- package/list/lambo-list.vue +3 -2
- package/package.json +1 -1
package/btn/lambo-btn-divide.vue
CHANGED
|
@@ -1,22 +1,88 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<
|
|
2
|
+
<div class="lambo-btn-divide" :style="holderStyle">
|
|
3
|
+
<div ref="bar"
|
|
4
|
+
class="container-divide"
|
|
5
|
+
:class="{'container-divide--fixed': fixed, 'container-divide--safe': fixed && safeArea}"
|
|
6
|
+
:style="barStyle">
|
|
7
|
+
<slot></slot>
|
|
8
|
+
</div>
|
|
4
9
|
</div>
|
|
5
10
|
</template>
|
|
6
11
|
<script>
|
|
7
|
-
import LamboBtn from "../btn/lambo-btn.vue";
|
|
8
|
-
|
|
9
12
|
export default {
|
|
10
13
|
name: "LamboBtnDivide",
|
|
11
|
-
|
|
12
|
-
|
|
14
|
+
props: {
|
|
15
|
+
// 是否固定在页面底部，常用于修改、新增等表单页面，避免滚动到底部才能操作
|
|
16
|
+
fixed: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
default: false
|
|
19
|
+
},
|
|
20
|
+
// 固定时是否适配 iPhone 底部安全区（Home 指示条）
|
|
21
|
+
safeArea: {
|
|
22
|
+
type: Boolean,
|
|
23
|
+
default: true
|
|
24
|
+
},
|
|
25
|
+
// 固定时的层级，默认与顶部导航栏一致；vant 弹层默认 2000+，会自然覆盖在底栏之上
|
|
26
|
+
zIndex: {
|
|
27
|
+
type: [Number, String],
|
|
28
|
+
default: 100
|
|
29
|
+
}
|
|
30
|
+
},
|
|
13
31
|
data() {
|
|
14
32
|
return {
|
|
15
|
-
|
|
33
|
+
barHeight: 0
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
computed: {
|
|
37
|
+
holderStyle() {
|
|
38
|
+
// 固定时底栏脱离文档流，外层生成等高占位，避免页面内容被遮挡
|
|
39
|
+
return this.fixed && this.barHeight > 0 ? {height: this.barHeight + 'px'} : {};
|
|
40
|
+
},
|
|
41
|
+
barStyle() {
|
|
42
|
+
return this.fixed ? {zIndex: this.zIndex} : {};
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
watch: {
|
|
46
|
+
fixed(val) {
|
|
47
|
+
if (val) {
|
|
48
|
+
this.$nextTick(this.updateHeight);
|
|
49
|
+
} else {
|
|
50
|
+
this.barHeight = 0;
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
safeArea() {
|
|
54
|
+
if (this.fixed) {
|
|
55
|
+
this.$nextTick(this.updateHeight);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
mounted() {
|
|
60
|
+
if (!this.fixed) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
this.$nextTick(this.updateHeight);
|
|
64
|
+
window.addEventListener('resize', this.updateHeight);
|
|
65
|
+
window.addEventListener('orientationchange', this.updateHeight);
|
|
66
|
+
// 按钮内容（字体、图标）变化导致高度变化时同步占位高度
|
|
67
|
+
if (typeof ResizeObserver !== 'undefined' && this.$refs.bar) {
|
|
68
|
+
this.resizeObserver = new ResizeObserver(this.updateHeight);
|
|
69
|
+
this.resizeObserver.observe(this.$refs.bar);
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
beforeDestroy() {
|
|
73
|
+
window.removeEventListener('resize', this.updateHeight);
|
|
74
|
+
window.removeEventListener('orientationchange', this.updateHeight);
|
|
75
|
+
if (this.resizeObserver) {
|
|
76
|
+
this.resizeObserver.disconnect();
|
|
77
|
+
this.resizeObserver = null;
|
|
16
78
|
}
|
|
17
79
|
},
|
|
18
80
|
methods: {
|
|
19
|
-
|
|
81
|
+
updateHeight() {
|
|
82
|
+
if (this.fixed && this.$refs.bar) {
|
|
83
|
+
this.barHeight = this.$refs.bar.offsetHeight;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
20
86
|
}
|
|
21
87
|
}
|
|
22
88
|
</script>
|
|
@@ -32,4 +98,23 @@ export default {
|
|
|
32
98
|
.container-divide /deep/ .btn-sel {
|
|
33
99
|
flex: 1;
|
|
34
100
|
}
|
|
101
|
+
|
|
102
|
+
/* 固定底部模式：白底 + 顶部分隔线 + 轻微阴影，与页面内容区分 */
|
|
103
|
+
.container-divide--fixed {
|
|
104
|
+
position: fixed;
|
|
105
|
+
right: 0;
|
|
106
|
+
bottom: 0;
|
|
107
|
+
left: 0;
|
|
108
|
+
box-sizing: border-box;
|
|
109
|
+
padding: 8px 14px;
|
|
110
|
+
background-color: var(--scl-white-1, #FFFFFF);
|
|
111
|
+
border-top: 1px solid var(--scl-white-3, #EBEDF0);
|
|
112
|
+
box-shadow: 0 -2px 8px rgba(51, 51, 51, 0.06);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* iPhone 底部安全区适配 */
|
|
116
|
+
.container-divide--safe {
|
|
117
|
+
padding-bottom: calc(8px + constant(safe-area-inset-bottom));
|
|
118
|
+
padding-bottom: calc(8px + env(safe-area-inset-bottom));
|
|
119
|
+
}
|
|
35
120
|
</style>
|
package/list/lambo-list.vue
CHANGED
|
@@ -52,10 +52,11 @@ export default {
|
|
|
52
52
|
type: Object
|
|
53
53
|
},
|
|
54
54
|
testMode: false,
|
|
55
|
-
/* 卡片分组模式: 灰底 +
|
|
55
|
+
/* 卡片分组模式: 灰底 + 独立白卡片。移动端统一使用卡片模式, 默认开启;
|
|
56
|
+
需要旧的扁平分割线模式时显式传 :card="false" */
|
|
56
57
|
card: {
|
|
57
58
|
type: Boolean,
|
|
58
|
-
default:
|
|
59
|
+
default: true,
|
|
59
60
|
},
|
|
60
61
|
},
|
|
61
62
|
data() {
|