Kaynağa Gözat

修复FloatPanel 组件

cc12458 1 ay önce
ebeveyn
işleme
3e93a2b79f
1 değiştirilmiş dosya ile 22 ekleme ve 22 silme
  1. 22 22
      src/composables/FloatPanel/FloatPanel.vue

+ 22 - 22
src/composables/FloatPanel/FloatPanel.vue

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