@mpxjs/webpack-plugin 2.10.3-beta.11 → 2.10.3-beta.13
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.
|
@@ -72,17 +72,6 @@ export default {
|
|
|
72
72
|
height: this.innerHeight
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
,
|
|
76
|
-
// content wrapper style: padding-top to avoid being covered by fixed titlebar
|
|
77
|
-
contentStyle () {
|
|
78
|
-
// use calc to combine innerHeight and safe-area inset
|
|
79
|
-
return {
|
|
80
|
-
paddingTop: this.hidden ? '0px' : `calc(${this.innerHeight} + env(safe-area-inset-top, 0px))`,
|
|
81
|
-
// create its own layer to avoid overlapping issues
|
|
82
|
-
transform: 'translateZ(0)',
|
|
83
|
-
willChange: 'transform'
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
75
|
},
|
|
87
76
|
methods: {
|
|
88
77
|
// 左侧点击：派发事件并在可回退时回退
|
|
@@ -134,7 +123,8 @@ export default {
|
|
|
134
123
|
]
|
|
135
124
|
|
|
136
125
|
// top-level wrapper: contains fixed titlebar and page content wrapper
|
|
137
|
-
return h('page', {
|
|
126
|
+
return h('page', { }, [
|
|
127
|
+
h('div', { class: 'mpx-titlebar-wrapper' }, [
|
|
138
128
|
// fixed titlebar
|
|
139
129
|
h('div', {
|
|
140
130
|
class: ['mpx-titlebar', { 'mpx-titlebar--hidden': this.hidden }],
|
|
@@ -150,8 +140,12 @@ export default {
|
|
|
150
140
|
]),
|
|
151
141
|
|
|
152
142
|
// page content wrapper: default slot is page content
|
|
153
|
-
h('div', { class: 'mpx-titlebar__content'
|
|
143
|
+
h('div', { class: 'mpx-titlebar__content' }, [
|
|
144
|
+
h('div', { class: 'mpx-titlebar__scroll' }, this.$slots.default || [])
|
|
145
|
+
])
|
|
154
146
|
])
|
|
147
|
+
])
|
|
148
|
+
|
|
155
149
|
}
|
|
156
150
|
}
|
|
157
151
|
</script>
|
|
@@ -211,24 +205,26 @@ export default {
|
|
|
211
205
|
/* wrapper and content layout */
|
|
212
206
|
.mpx-titlebar-wrapper {
|
|
213
207
|
position: relative;
|
|
214
|
-
width:
|
|
215
|
-
height:
|
|
208
|
+
width: 100vw;
|
|
209
|
+
height: 100vh;
|
|
210
|
+
display: flex;
|
|
211
|
+
flex-direction: column;
|
|
216
212
|
}
|
|
217
213
|
|
|
218
214
|
.mpx-titlebar {
|
|
219
|
-
|
|
220
|
-
top: 0;
|
|
221
|
-
left: 0;
|
|
222
|
-
right: 0;
|
|
223
|
-
z-index: 1000; /* ensure above page content */
|
|
215
|
+
flex-shrink: 0;
|
|
224
216
|
}
|
|
225
217
|
|
|
226
218
|
.mpx-titlebar__content {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
219
|
+
flex: 1;
|
|
220
|
+
overflow: hidden;
|
|
221
|
+
transform: translateZ(0);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.mpx-titlebar__scroll {
|
|
225
|
+
width: 100%;
|
|
226
|
+
height: 100%;
|
|
227
|
+
overflow: auto;
|
|
232
228
|
}
|
|
233
229
|
|
|
234
230
|
/* SVG icon sizing and inherit color */
|