- 开始使用
- Vue 组件
面板 Vue 组件
面板 Vue 组件表示侧面板组件。
面板组件
包含以下组件：
f7-panel- 面板元素
面板属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 侧 | 字符串 | 面板侧。可以是left或right | |
| 左 | 布尔值 | 快捷属性用于side="left" | |
| 右 | 布尔值 | 快捷属性用于side="right" | |
| 效果 | 字符串 | 面板效果。可以是cover, reveal或push | |
| 覆盖 | 布尔值 | 快捷属性用于effect="cover" | |
| 揭示 | 布尔值 | 快捷属性用于effect="reveal" | |
| push | 布尔值 | 快捷属性用于effect="push" | |
| 漂浮 | 布尔值 | 快捷属性用于effect="floating" | |
| 可见断点 | 数字 | 最小应用宽度（以像素为单位），当左侧面板始终可见时 | |
| 折叠断点 | 数字 | 最小应用宽度（以像素为单位），当左侧面板部分可见（折叠）时 | |
| 滑动 | 布尔值 | false | 如果你想启用用滑动打开/关闭面板的功能，请启用此选项 |
| 无跟随滑动 | 布尔值 | false | 对于旧设备/慢设备可能更好的性能的回退选项。如果你启用它，那么在触摸移动时，滑动面板将不会跟随你的手指，它将在滑动左右时自动打开/关闭。 |
| 滑动活动区域 | 数字 | 0 | 触屏屏幕上触发面板滑动的不可见边缘宽度（以像素为单位） |
| 仅滑动关闭 | 布尔值 | false | 此参数允许用滑动关闭（但不能打开）面板。（应该也启用）swipe应该也启用 |
| 滑动阈值 | 数字 | 0 | 如果“触摸距离”小于此值（以像素为单位），面板将不会随着滑动而移动。 |
| 背景遮罩 | 布尔值 | true | 启用面板背景（背后的深色半透明层） |
| backdrop-el | HTMLElement 字符串 | 自定义背景元素的HTML元素或字符串CSS选择器 | |
| close-by-backdrop-click | 布尔值 | true | 启用/禁用通过点击面板外部关闭面板的能力 |
| resizable | 布尔值 | false | 启用/禁用可调整大小的面板 |
| container-el | HTMLElement 字符串 | 面板挂载元素（默认为应用根元素） | |
| opened | 布尔值 | 允许打开/关闭面板并设置其初始状态 |
面板事件
| 事件 | 描述 |
|---|---|
| panel:open | 当面板开始其打开动画时将触发事件 |
| panel:opened | 当面板完成其打开动画后触发事件 |
| panel:close | 当面板开始其关闭动画时触发事件 |
| panel:closed | 当面板完成其关闭动画后触发事件 |
| panel:backdrop-click | 当面板背景被点击时触发事件 |
| panel:swipe | 在触摸滑动操作期间为滑动面板触发事件 |
| panel:swipeopen | 在用滑动打开它的最开始时触发事件 |
| panel:collapsedbreakpoint | 当应用宽度与其匹配时，它将变得可见/隐藏时触发事件collapsedBreakpoint |
| panel:breakpoint | 当应用宽度与其匹配时，它将变得可见/隐藏时触发事件visibleBreakpoint |
Panel v-model
面板组件支持v-modelonopenedprop:
<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.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>
