wl-design-mobile 0.8.17 → 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 -18
- 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() {
|
|
@@ -410,19 +411,3 @@ export default {
|
|
|
410
411
|
padding: 0;
|
|
411
412
|
}
|
|
412
413
|
</style>
|
|
413
|
-
|
|
414
|
-
<!-- 非 scoped: 机模/真机环境下(容器在 body 打 m-device-scroll 标记, 见宿主 App.vue),
|
|
415
|
-
滚动条由容器统一模拟为悬浮条, 本组件不再保留桌面端的 3px(WebKit)/thin(Firefox)
|
|
416
|
-
滚动条——经典滚动条会占布局宽度, 挤掉右侧卡片缝隙。
|
|
417
|
-
双类特异性(0,2,1 / 0,2,0)压过上面 scoped 规则(0,1,1 / 0,1,0),
|
|
418
|
-
与样式注入顺序无关; 仅在设备标记下生效, 桌面使用方行为不变 -->
|
|
419
|
-
<style lang="less">
|
|
420
|
-
.m-device-scroll .custom-list::-webkit-scrollbar {
|
|
421
|
-
width: 0;
|
|
422
|
-
height: 0;
|
|
423
|
-
display: none;
|
|
424
|
-
}
|
|
425
|
-
.m-device-scroll .custom-list {
|
|
426
|
-
scrollbar-width: none; /* Firefox */
|
|
427
|
-
}
|
|
428
|
-
</style>
|