时间戳

首页 > 解决方案 > 如何使模态表滑动步骤默认部分打开？

javascript - 如何使模态表滑动步骤默认部分打开？

问题描述

我有一个具有以下结构的模态表组件：

<f7-sheet
        class="myClass"
        style="height: auto"
        swipe-to-step
        :backdrop="false"
    >
      <div class="sheet-modal-inner">
          <div class="sheet-modal-swipe-step">
             ...
          </div>
      </div>

      <template #static>
          <MyComponent></MyComponent>
      </template>
</f7-sheet>

目前，我必须单击一个按钮来显示部分模式表，然后我可以向上滑动以显示全部内容：

<f7-button sheet-open=".myClass">Swipe To Step</f7-button>

我的目标是默认显示部分模态表，因此无需单击按钮。如果我将“打开”添加到 ，则整个工作表会立即打开，而不仅仅是滑动步骤部分。

有谁知道如何实现这一目标？谢谢你。

标签： javascriptvue.jshtml-framework-7

解决方案

我通过使用“opened”道具并在 onMounted 钩子中将其分配为 true 解决了这个问题：

<f7-sheet 
  v-model:opened="isOpened"
  ...
>
</f7-sheet>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    let opened = ref(null);

    onMounted( () => {
      opened.value = true;
    });

    return {
      isOpened: opened
    }
  }
}
</script>

推荐阅读