赞助商成为赞助商

Sheet Modal Vue 组件

Sheet Modal 是一种特殊的覆盖类型，类似于 Picker/Calendar 的覆盖。这种模态允许您创建具有自定义内容的自定义选择器覆盖。

Sheet Modal Vue 组件代表了 Sheet Modal 组件。

Sheet Modal 组件

以下组件包含在内

Sheet Modal 属性

属性类型描述
<f7-sheet> 属性
position字符串Sheet 位置，可以是 top 或 bottom。默认值为 bottom
top布尔值与 position="top" 相同
bottom布尔值与 position="bottom" 相同
backdrop布尔值启用以在需要时渲染额外的 Sheet Modal 背景。
backdrop-el字符串
对象		自定义背景元素的 HTML 元素或字符串 CSS 选择器。
backdrop-unique布尔值如果启用，它会为该模态创建唯一的背景元素。
opened布尔值允许打开/关闭 Sheet Modal 并设置其初始状态。
close-by-backdrop-click布尔值启用后，点击背景将关闭 Sheet。默认情况下继承相同的应用程序参数值。
close-by-outside-click布尔值启用后，点击 Sheet 外部将关闭 Sheet。默认情况下继承相同的应用程序参数值。
close-on-escape布尔值启用后，按下 ESC 键将关闭 Sheet。
swipe-to-close布尔值Sheet 是否可以通过滑动手势关闭。
swipe-to-step布尔值启用后，可以将打开的 Sheet 分成两个状态：部分打开和完全打开，可以通过滑动来控制。
swipe-handlerHTMLElement
字符串		如果没有传递，则整个 Sheet 可以滑动以关闭。您可以在此处传递 HTML 元素或字符串 CSS 选择器作为自定义元素，该元素将用作滑动目标。(swipeToClose 或 swipeToStep 必须也启用)
push布尔值启用后，它将在打开时将后面的视图推入。仅在顶部安全区域到位时有效。还可以通过在 Sheet 元素中添加 sheet-modal-push 类来启用它。
breakpoints数字数组用作 swipeToStep 的替代方案以启用滑动断点。必须是一个大于 0 且小于 1 的数字数组，其中 0 表示完全关闭，1 表示完全打开，例如 [0.33, 0.66]、[0.5] 等。
backdrop-breakpoint数字定义背景变得可见时的断点。数字从 0（理想情况下从 breakpoints 数组的最低（第一个）值）到 1（默认值为 0）。
push-breakpoint数字定义将后面的视图推回（push 必须启用）时的断点。数字从 0（理想情况下从 breakpoints 数组的最低（第一个）值）到 1（默认值为 0）。
animate布尔值模态是否应该带有动画打开/关闭。
container-elHTMLElement
字符串		要将模态挂载到的元素（默认情况下为应用根元素）。

Sheet Modal 事件

事件描述
<f7-sheet> 事件
sheet:open当 Sheet Modal 开始其打开动画时，将触发该事件。
sheet:opened当 Sheet Modal 完成其打开动画后，将触发该事件。
sheet:close当 Sheet Modal 开始其关闭动画时，将触发该事件。
sheet:closed当 Sheet Modal 完成其关闭动画后，将触发该事件。
sheet:stepopen当 Sheet 滑动步骤打开/展开时，将触发该事件。
sheet:stepclose当 Sheet 滑动步骤关闭/折叠时，将触发该事件。
sheet:stepprogress在 Sheet 滑动步骤在打开和关闭状态之间时触发事件。作为第二个参数，它接收步骤打开进度号（从 0 到 1）。
sheet:breakpoint在 Sheet 断点更改时触发事件。作为第二个参数，它接收当前断点（从 0 到 1）。

Sheet Modal 插槽

<f7-sheet> 组件有用于自定义元素的额外插槽。

<f7-sheet>
  <template #fixed>
    <span>Fixed slot</span>
  </template>
  <template #static>
    <span>Static slot</span>
  </template>
  <span>Default slot</span>
</f7-sheet>

渲染到

<div class="sheet-modal">
  <span>Fixed slot</span>
  <div class="sheet-modal-inner">
    <span>Default slot</span>
    <span>Static slot</span>
  </div>
</div>

Sheet Modal v-model

Sheet Modal 组件支持 opened 属性上的 v-model。

<template>
  <f7-page>
    <f7-sheet v-model:opened="isOpened">
      ...
    </f7-sheet>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

打开和关闭 Sheet Modal

您可以控制 Sheet Modal 的状态，打开和关闭它。

示例

sheet-modal.vue
<template>
  <f7-page @page:beforeremove="onPageBeforeRemove" @page:beforeout="onPageBeforeOut">
    <f7-navbar title="Sheet Modal"></f7-navbar>
    <f7-block strong-ios outline-ios>
      <p>
        Sheet Modals slide up from the bottom of the screen to reveal more content. Such modals
        allow to create custom overlays with custom content.
      </p>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button fill sheet-open=".demo-sheet">Open Sheet</f7-button>
        <f7-button fill @click="createSheet">Dynamic Sheet</f7-button>
      </p>
      <p>
        <f7-button fill sheet-open=".demo-sheet-top">Top Sheet</f7-button>
      </p>
      <p>
        <f7-button fill @click="sheetOpened = true">Open Via Prop Change</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Push View</f7-block-title>
    <f7-block strong-ios outline-ios>
      <p>
        Sheet can push view behind on open. By default it has effect only when `safe-area-inset-top`
        is more than zero (iOS fullscreen webapp or iOS cordova app)
      </p>
      <p>
        <f7-button fill sheet-open=".demo-sheet-push">Sheet Push</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Swipeable Sheet</f7-block-title>
    <f7-block strong-ios outline-ios>
      <p>
        Sheet modal can be closed with swipe to top (for top Sheet) or bottom (for default Bottom
        sheet):
      </p>
      <p>
        <f7-button fill sheet-open=".demo-sheet-swipe-to-close">Swipe To Close</f7-button>
      </p>
      <p>Also there is swipe-step that can be set on Sheet modal to expand it with swipe:</p>
      <p>
        <f7-button fill sheet-open=".demo-sheet-swipe-to-step">Swipe To Step</f7-button>
      </p>
      <p>
        In addition to "swipe step" there is a support for position breakpoints (multiple steps):
      </p>
      <p>
        <f7-button fill sheet-open=".demo-sheet-breakpoints">Breakpoints</f7-button>
      </p>
    </f7-block>

    <f7-sheet v-model:opened="sheetOpened" class="demo-sheet">
      <f7-toolbar>
        <div class="left"></div>
        <div class="right">
          <f7-link sheet-close>Close</f7-link>
        </div>
      </f7-toolbar>
      <!-- Scrollable sheet content -->
      <f7-page-content>
        <f7-block>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa
            aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in
            tempora harum sequi corporis alias ex adipisci.
          </p>
          <p>
            Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui
            sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut
            deserunt soluta alias magnam. Consequatur, nisi, enim.
          </p>
          <p>
            Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
            voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
            adipisci vel voluptatum, autem libero minus dignissimos repellat.
          </p>
          <p>
            Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
            expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
            obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
          </p>
          <p>
            Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur
            totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus
            sapiente repellendus nesciunt praesentium velit ipsa illo iusto.
          </p>
        </f7-block>
      </f7-page-content>
    </f7-sheet>

    <f7-sheet top class="demo-sheet-top">
      <f7-toolbar bottom>
        <div class="left"></div>
        <div class="right">
          <f7-link sheet-close>Close</f7-link>
        </div>
      </f7-toolbar>
      <!-- Scrollable sheet content -->
      <f7-page-content>
        <f7-block>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa
            aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in
            tempora harum sequi corporis alias ex adipisci.
          </p>
          <p>
            Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui
            sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut
            deserunt soluta alias magnam. Consequatur, nisi, enim.
          </p>
          <p>
            Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
            voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
            adipisci vel voluptatum, autem libero minus dignissimos repellat.
          </p>
          <p>
            Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
            expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
            obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
          </p>
          <p>
            Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur
            totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus
            sapiente repellendus nesciunt praesentium velit ipsa illo iusto.
          </p>
        </f7-block>
      </f7-page-content>
    </f7-sheet>

    <f7-sheet class="demo-sheet-push" push>
      <f7-toolbar>
        <div class="left"></div>
        <div class="right">
          <f7-link sheet-close>Close</f7-link>
        </div>
      </f7-toolbar>
      <!-- Scrollable sheet content -->
      <f7-page-content>
        <f7-block>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa
            aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in
            tempora harum sequi corporis alias ex adipisci.
          </p>
          <p>
            Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui
            sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut
            deserunt soluta alias magnam. Consequatur, nisi, enim.
          </p>
          <p>
            Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
            voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
            adipisci vel voluptatum, autem libero minus dignissimos repellat.
          </p>
          <p>
            Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
            expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
            obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
          </p>
          <p>
            Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur
            totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus
            sapiente repellendus nesciunt praesentium velit ipsa illo iusto.
          </p>
        </f7-block>
      </f7-page-content>
    </f7-sheet>

    <f7-sheet class="demo-sheet-swipe-to-close" style="height: auto" swipe-to-close push backdrop>
      <div class="swipe-handler"></div>

      <f7-page-content>
        <f7-block-title large>Hello!</f7-block-title>
        <f7-block>
          <p>
            Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
            voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
            adipisci vel voluptatum, autem libero minus dignissimos repellat.
          </p>
          <p>
            Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
            expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
            obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
          </p>
        </f7-block>
      </f7-page-content>
    </f7-sheet>

    <f7-sheet
      class="demo-sheet-swipe-to-step"
      style="height: auto"
      swipe-to-close
      swipe-to-step
      push
      backdrop
    >
      <div class="swipe-handler" @click="toggleSwipeStep"></div>
      <div class="sheet-modal-swipe-step">
        <div class="display-flex padding justify-content-space-between align-items-center">
          <div style="font-size: 18px"><b>Total:</b></div>
          <div style="font-size: 22px"><b>$500</b></div>
        </div>
        <div class="padding-horizontal padding-bottom">
          <f7-button large fill>Make Payment</f7-button>
          <div class="margin-top text-align-center">Swipe up for more details</div>
        </div>
      </div>
      <f7-block-title medium class="margin-top">Your order:</f7-block-title>
      <f7-list>
        <f7-list-item title="Item 1">
          <template #after>
            <b>$200</b>
          </template>
        </f7-list-item>
        <f7-list-item title="Item 2">
          <template #after>
            <b>$180</b>
          </template>
        </f7-list-item>
        <f7-list-item title="Delivery">
          <template #after>
            <b>$120</b>
          </template>
        </f7-list-item>
      </f7-list>
    </f7-sheet>

    <f7-sheet
      class="demo-sheet-breakpoints"
      style="height: auto"
      swipe-to-close
      :breakpoints="[0.33, 0.66]"
      backdrop
      :backdrop-breakpoint="0.66"
      push
      :push-breakpoint="0.66"
    >
      <div class="swipe-handler" style="background-color: transparent"></div>
      <div style="display: flex; align-items: center; justify-content: center; height: 20vh">
        Section 1
      </div>
      <div style="display: flex; align-items: center; justify-content: center; height: 20vh">
        Section 2
      </div>
      <div style="display: flex; align-items: center; justify-content: center; height: 20vh">
        Section 3
      </div>
    </f7-sheet>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7Navbar,
  f7Sheet,
  f7PageContent,
  f7Toolbar,
  f7BlockTitle,
  f7Block,
  f7Button,
  f7Link,
  f7List,
  f7ListItem,
  f7,
} from 'framework7-vue';
import $ from 'dom7';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7Sheet,
    f7PageContent,
    f7Toolbar,
    f7BlockTitle,
    f7Block,
    f7Button,
    f7Link,
    f7List,
    f7ListItem,
  },
  data() {
    return {
      sheetOpened: false,
    };
  },
  methods: {
    toggleSwipeStep() {
      f7.sheet.stepToggle('.demo-sheet-swipe-to-step');
    },
    createSheet() {
      const self = this;
      // Create sheet modal
      if (!self.sheet) {
        self.sheet = f7.sheet.create({
          content: `
            <div class="sheet-modal sheet-modal-bottom">
              <div class="toolbar">
                <div class="toolbar-inner justify-content-flex-end">
                  <a  class="link sheet-close">Close</a>
                </div>
              </div>
              <div class="sheet-modal-inner">
                <div class="page-content">
                  <div class="block">
                    <p>This sheet modal was created dynamically</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
                  </div>
                </div>
              </div>
            </div>
          `.trim(),
        });
      }
      // Close inline sheet
      if ($('.demo-sheet.modal-in').length > 0) f7.sheet.close('.demo-sheet');
      // Open it
      self.sheet.open();
    },
    onPageBeforeOut() {
      // Close opened sheets on page out
      f7.sheet.close();
    },
    onPageBeforeRemove() {
      const self = this;
      // Destroy sheet modal when page removed
      if (self.sheet) self.sheet.destroy();
    },
  },
};
</script>
改进此文档
在此页面上