Sheet Modal Vue组件

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

Sheet Modal组件表示表格模态组件。

Sheet Modal组件

包含以下组件：

Sheet Modal属性

属性类型描述
<f7-sheet>属性
位置字符串Sheet位置，可以是top或bottom.默认是bottom
顶部布尔值与position="top"
底部相同布尔值与position="bottom"
背景遮罩布尔值在需要时启用渲染额外的Sheet Modal背景遮罩
backdrop-el字符串
对象		自定义背景元素的HTML元素或字符串CSS选择器
backdrop-unique布尔值如果启用，它将为该模态创建唯一的背景元素
opened布尔值允许打开/关闭Sheet Modal并设置其初始状态
close-by-backdrop-click布尔值当启用时，点击背景遮罩将关闭Sheet。默认继承相同的应用参数值
close-by-outside-click布尔值当启用时，点击其外部将关闭Sheet。默认继承相同的应用参数值
close-on-escape布尔值当启用时，按下ESC键盘键将关闭Sheet
swipe-to-close布尔值Sheet是否可以用滑动手势关闭
swipe-to-step布尔值当启用时，可以将其分为两种状态：部分打开和完全打开，可以通过滑动控制
swipe-handlerHTMLElement
字符串		如果未传递，则整个Sheet都可以滑动关闭。您可以在此处传递HTML元素或字符串CSS选择器，该元素将用作滑动目标。（必须启用）swipeToClose或swipeToSteppush
push布尔值当启用时，打开时将视图推到后面。仅在顶部安全区域存在时才有效。也可以通过向Sheet元素添加sheet-modal-push类来启用
breakpointsnumber[]用作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:openedSheet Modal完成其打开动画后触发事件
sheet:close当Sheet Modal开始其关闭动画时将触发事件
sheet:closedSheet 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组件支持v-modelonopenedprop:

<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>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗