- 开始使用
- Vue 组件
弹出框 Vue 组件
Popover 组件用于管理弹出内容的表现形式。您使用弹出框来临时展示信息。弹出框会保持可见，直到用户点击弹出框窗口外部或您显式地关闭它。
弹出框 Vue 组件表示弹出框组件。
弹出组件
包含以下组件：
f7-popover
弹出属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| <f7-popover> 属性 | |||
| opened | 布尔值 | false | 允许打开/关闭弹出框并设置其初始状态 |
| 箭头 | 布尔值 | true | 启用弹出框箭头/角落 |
| target-el | 字符串 对象 | 弹出框目标元素的 HTML 元素或字符串 CSS 选择器 | |
| 垂直位置 | 字符串 | 自动 | 强制弹出框垂直位置，可以是auto, top或bottom |
| 背景遮罩 | 布尔值 | true | 启用弹出框背景（背后的深色半透明层）。默认继承相同的应用参数值true) |
| backdrop-el | 字符串 对象 | 自定义背景元素的HTML元素或字符串CSS选择器 | |
| backdrop-unique | 布尔值 | false | 如果启用，它将为该模态创建唯一的背景元素 |
| close-by-backdrop-click | 布尔值 | true | 当启用时，点击背景会关闭弹出框。默认继承相同的应用参数值 |
| close-by-outside-click | 布尔值 | true | 当启用时，点击弹出框外部会关闭它。默认继承相同的应用参数值 |
| close-on-escape | 布尔值 | false | 当启用时，按下 ESC 键盘键会关闭弹出框 |
| animate | 布尔值 | true | 模态是否应该以动画方式打开/关闭 |
| container-el | HTMLElement 字符串 | 模态挂载到的元素（默认为应用根元素） | |
弹出事件
| 事件 | 描述 |
|---|---|
| <f7-popover> 事件 | |
| popover:open | 当弹出框开始打开动画时将触发事件 |
| popover:opened | 当弹出框完成打开动画后触发事件 |
| popover:close | 当弹出框开始关闭动画时触发事件 |
| popover:closed | 当弹出框完成关闭动画后触发事件 |
弹出框 v-model
弹出框组件支持v-modelonopenedprop:
<template>
<f7-page>
<f7-popover v-model:opened="isOpened">
...
</f7-popover>
<p>Modal is opened: {{ isOpened }}</p>
</f7-page>
</template>
<script>
export default {
data() {
return {
isOpened: false,
};
}
};
</script>
打开和关闭弹出框
您可以控制弹出框状态，打开和关闭它：
示例
popover.vue
<template>
<f7-page>
<f7-navbar title="Popover"></f7-navbar>
<f7-toolbar bottom>
<f7-link>Dummy Link</f7-link>
<f7-link popover-open=".popover-menu">Open Popover</f7-link>
</f7-toolbar>
<f7-block>
<p><f7-button fill popover-open=".popover-menu">Open popover on me</f7-button></p>
<p>
Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod
mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis
rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere
dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus
volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a
odio facilisis, elementum tellus non,
<f7-link popover-open=".popover-menu">popover</f7-link> tortor. Pellentesque felis eros,
dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis
imperdiet.
</p>
<p>
In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa
rutrum dolor, ac porta magna magna lacinia nunc. Curabitur
<f7-link popover-open=".popover-menu">popover!</f7-link> cursus laoreet. Aenean vel tempus
augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat.
Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non,
ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus.
Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus.
Pellentesque eget ante ante.
</p>
<p>
Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit
amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum
in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis
viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper
<f7-link popover-open=".popover-menu">one more popover</f7-link> massa at accumsan. Etiam
purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi.
Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis
lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc.
Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor
feugiat.
</p>
</f7-block>
<f7-popover class="popover-menu">
<f7-list>
<f7-list-item link="/dialog/" popover-close title="Dialog" />
<f7-list-item link="/tabs/" popover-close title="Tabs" />
<f7-list-item link="/panel/" popover-close title="Side Panels" />
<f7-list-item link="/list/" popover-close title="List View" />
<f7-list-item link="/inputs/" popover-close title="Form Inputs" />
</f7-list>
</f7-popover>
</f7-page>
</template>
<script>
import {
f7Navbar,
f7Page,
f7Toolbar,
f7Popover,
f7List,
f7ListItem,
f7Block,
f7Link,
f7Button,
} from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7Toolbar,
f7Popover,
f7List,
f7ListItem,
f7Block,
f7Link,
f7Button,
},
};
</script>
