面板 Vue 组件

面板 Vue 组件表示侧面板组件。

面板组件

以下是包含的组件

f7-panel - 面板元素

面板属性

属性	类型	默认	说明
side	字符串		面板侧边。可能是`left`或`right`
left	布尔值		`side="left"` 的快捷属性
right	布尔值		`side="right"` 的快捷属性
effect	字符串		面板效果。可以是 `cover`、`reveal` 或 `push`
cover	布尔值		`effect="cover"` 的快捷属性
reveal	布尔值		`effect="reveal"` 的快捷属性
push	布尔值		`effect="push"` 的快捷属性
floating	布尔值		`effect="floating"` 的快捷道具
visible-breakpoint	数字		左面板始终可见的最小应用宽度（以像素为单位）
collapsed-breakpoint	数字		左面板部分可见（折叠）的最小应用宽度（以像素为单位）
swipe	布尔值	false	如果您希望通过滑动打开/关闭面板，请启用此选项
swipe-no-follow	布尔值	false	在老式/慢速设备上可能提供更好的性能的备用选项。如果您启用此选项，那么滑动面板在触控移动期间将不会跟随您的手指，它将在向左/向右滑动时自动打开/关闭。
swipe-active-area	数字	0	触发面板滑动的屏幕的不可见边缘的宽度（以像素为单位）
swipe-only-close	布尔值	false	此参数允许通过滑动关闭（但不能打开）面板。（`swipe` 也应该已启用）
swipe-threshold	数字	0	如果“触控距离”小于此值（以像素为单位），面板将不会随滑动而移动。
backdrop	布尔值	true	启用面板背景（背后的半透明暗色图层）
backdrop-el	HTMLElement 字符串		自定义背景元素的 HTML 元素或字符串 CSS 选择器
close-by-backdrop-click	布尔值	true	启用/禁用通过点击面板外部来关闭面板的选项
resizable	布尔值	false	启用/禁用可调整大小的面板
container-el	HTMLElement 字符串		供面板安装到的元素（默认为应用根元素）
opened	布尔值		允许打开/关闭面板并设置其初始状态

Panel 事件

事件	说明
panel:open	当面板开始其打开动画时将触发事件
panel:opened	当面板完成其打开动画后将触发事件
panel:close	当面板开始其关闭动画时将触发事件
panel:closed	当面板完成其关闭动画后将触发事件
panel:backdrop-click	当点击面板背景时将触发事件
panel:swipe	在触控滑动操作期间，将为滑动面板触发事件
panel:swipeopen	在开始通过滑动打开它的那一刻触发事件
panel:collapsedbreakpoint	当应用宽度与其 `collapsedBreakpoint` 匹配时，它变得可见/隐藏时触发事件
panel:breakpoint	当应用宽度与其 `visibleBreakpoint` 匹配时，它变得可见/隐藏时触发事件

Panel v-model

Panel 组件支持打开 opened prop 上的 v-model

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

打开和关闭面板

您可以控制面板状态、打开和关闭它

使用 Panel API
通过将 true 或 false 传递给其 opened 道具
通过点击具有相关 panel-open 属性（将其打开）和 panel-close 属性（将其关闭）的链接或按钮

示例

panel.vue

<template>
  <f7-page id="panel-page">
    <f7-navbar title="Panel / Side panels"></f7-navbar>
    <f7-panel id="panel-nested" left cover container-el="#panel-page">
      <f7-page>
        <f7-block strong-ios outline-ios>
          <p>This is page-nested Panel.</p>
          <p>
            <f7-link panel-close>Close me</f7-link>
          </p>
        </f7-block>
      </f7-page>
    </f7-panel>
    <f7-block strong-ios outline-ios>
      <p>
        Framework7 comes with 2 panels (on left and on right), both are optional. You can put
        absolutely anything inside: data lists, forms, custom content, and even other isolated app
        view (like in right panel now) with its own dynamic navbar.
      </p>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button raised fill panel-open="left"> Open left panel </f7-button>
        <f7-button raised fill panel-open="right"> Open right panel </f7-button>
      </p>
      <p>
        <f7-button raised fill panel-open="#panel-nested"> Open nested panel </f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Button, f7Link, f7Panel } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Button,
    f7Link,
    f7Panel,
  },
};
</script>

改进此文档

在本页

面板组件
面板属性
Panel 事件
Panel v-model
打开和关闭面板
示例