|
@@ -118,9 +118,7 @@ onUpdated(() => {
|
|
|
if (autoHeight) syncIntrinsicAutoContentHeight();
|
|
if (autoHeight) syncIntrinsicAutoContentHeight();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-const measuredContentHeightForAnchors = computed(() =>
|
|
|
|
|
- autoHeight ? intrinsicAutoContentHeight.value : measuredContentHeight.value,
|
|
|
|
|
-);
|
|
|
|
|
|
|
+const measuredContentHeightForAnchors = computed(() => (autoHeight ? intrinsicAutoContentHeight.value : measuredContentHeight.value));
|
|
|
|
|
|
|
|
const style = computed(() => {
|
|
const style = computed(() => {
|
|
|
return {
|
|
return {
|
|
@@ -135,25 +133,19 @@ const instance: FloatPanelInstance = {
|
|
|
return toValue(anchors);
|
|
return toValue(anchors);
|
|
|
},
|
|
},
|
|
|
setAnchors(values: number | number[], reset = true) {
|
|
setAnchors(values: number | number[], reset = true) {
|
|
|
- const result = computeAnchorsAndSnapHeight(
|
|
|
|
|
- values,
|
|
|
|
|
- reset,
|
|
|
|
|
- height.value,
|
|
|
|
|
- maxContainerHeight,
|
|
|
|
|
- anchors.value,
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ const result = computeAnchorsAndSnapHeight(values, reset, height.value, maxContainerHeight, anchors.value);
|
|
|
if (!result) return;
|
|
if (!result) return;
|
|
|
anchors.value = result.anchors;
|
|
anchors.value = result.anchors;
|
|
|
height.value = result.height;
|
|
height.value = result.height;
|
|
|
},
|
|
},
|
|
|
setHeight(value: number, updateAnchor = true) {
|
|
setHeight(value: number, updateAnchor = true) {
|
|
|
- const total = value + panelHeaderHeight.value;
|
|
|
|
|
if (updateAnchor) {
|
|
if (updateAnchor) {
|
|
|
|
|
+ const total = value + panelHeaderHeight.value;
|
|
|
instance.setAnchors(total, false);
|
|
instance.setAnchors(total, false);
|
|
|
height.value = total;
|
|
height.value = total;
|
|
|
- return;
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
+ height.value = value;
|
|
|
}
|
|
}
|
|
|
- height.value = total;
|
|
|
|
|
},
|
|
},
|
|
|
closeAnimated: applyCloseAnimation,
|
|
closeAnimated: applyCloseAnimation,
|
|
|
|
|
|
|
@@ -211,19 +203,14 @@ const onClickOverlay = () => {
|
|
|
|
|
|
|
|
/** 与 Vant `height-change` 一致:内容区高度 = 面板总高 − 头高。逻辑层改 `v-model:height` 时未必触发该事件,需自行同步 CSS 变量 */
|
|
/** 与 Vant `height-change` 一致:内容区高度 = 面板总高 − 头高。逻辑层改 `v-model:height` 时未必触发该事件,需自行同步 CSS 变量 */
|
|
|
function syncPanelContentHeightFromTotal(total: number) {
|
|
function syncPanelContentHeightFromTotal(total: number) {
|
|
|
- panelContentHeight.value =
|
|
|
|
|
- total <= 0 ? 0 : Math.max(0, total - panelHeaderHeight.value);
|
|
|
|
|
|
|
+ panelContentHeight.value = total <= 0 ? 0 : Math.max(0, total - panelHeaderHeight.value);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const onUpdateHeight = ({ height: h }: { height: number }) => {
|
|
const onUpdateHeight = ({ height: h }: { height: number }) => {
|
|
|
syncPanelContentHeightFromTotal(h);
|
|
syncPanelContentHeightFromTotal(h);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-watch(
|
|
|
|
|
- [height, panelHeaderHeight],
|
|
|
|
|
- () => syncPanelContentHeightFromTotal(height.value),
|
|
|
|
|
- { flush: 'post', immediate: true },
|
|
|
|
|
-);
|
|
|
|
|
|
|
+watch([height, panelHeaderHeight], () => syncPanelContentHeightFromTotal(height.value), { flush: 'post', immediate: true });
|
|
|
|
|
|
|
|
watch(height, (h, prev) => {
|
|
watch(height, (h, prev) => {
|
|
|
if (h !== 0) {
|
|
if (h !== 0) {
|
|
@@ -273,6 +260,7 @@ defineExpose(instance);
|
|
|
<div ref="panel-content-root" class="float-panel-content-root">
|
|
<div ref="panel-content-root" class="float-panel-content-root">
|
|
|
<slot name="content"></slot>
|
|
<slot name="content"></slot>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="float-panel-footer-root"></div>
|
|
|
</template>
|
|
</template>
|
|
|
</van-floating-panel>
|
|
</van-floating-panel>
|
|
|
</van-overlay>
|
|
</van-overlay>
|
|
@@ -307,7 +295,7 @@ defineExpose(instance);
|
|
|
.van-floating-panel__header_icon {
|
|
.van-floating-panel__header_icon {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: calc($gap / 2);
|
|
top: calc($gap / 2);
|
|
|
- right:calc($gap / 2);
|
|
|
|
|
|
|
+ right: calc($gap / 2);
|
|
|
color: var(--van-floating-panel-bar-color);
|
|
color: var(--van-floating-panel-bar-color);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -315,13 +303,25 @@ defineExpose(instance);
|
|
|
height: var(--van-floating-panel-content-height);
|
|
height: var(--van-floating-panel-content-height);
|
|
|
overflow: hidden !important;
|
|
overflow: hidden !important;
|
|
|
flex: none;
|
|
flex: none;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
min-height: 0;
|
|
min-height: 0;
|
|
|
> * {
|
|
> * {
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ //height: 100%;
|
|
|
min-height: 0;
|
|
min-height: 0;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ &.float-panel--auto-height {
|
|
|
|
|
+ .float-panel-content-root {
|
|
|
|
|
+ flex: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ .float-panel-footer-root {
|
|
|
|
|
+ flex: auto;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|