如何让Modal Sheet Swipe Step默认部分打开？

Question

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

<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>

目前，我必须单击一个按钮才能显示部分模态框 Sheet，然后我可以向上滑动以显示完整内容：

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

我的目标是默认显示部分模态 Sheet，因此无需单击按钮。如果我在中添加“打开”，整个 sheet 立即打开，而不仅仅是滑动步骤部分。

有人知道如何实现吗？谢谢。

Answer 1

我通过使用“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>

如何让Modal Sheet Swipe Step默认部分打开？

How to make Modal Sheet Swipe Step partially opened by default?

javascript

vue.js

html-framework-7