赞助商成为赞助商

Popover Vue 组件

Popover 组件用于管理弹出信息中的内容呈现。你可以使用弹出信息来临时呈现信息。弹出信息会在用户轻触弹出窗口外侧或你明确关闭弹出窗口之前保持可见。

Popover Vue 组件表示 弹出信息 组件。

弹出信息组件

包括下列组件

弹出信息属性

属性类型默认值说明
<f7-popover> 属性
opened布尔值false允许打开/关闭弹出信息并设置其初始状态
arrow布尔值true启用弹出信息箭头/角
target-el字符串
对象		Popover 目标元素的 HTML 元素或字符串 CSS 选择器
vertical-position字符串auto强制 popover 垂直位置，可以是 auto、top 或 bottom
backdrop布尔值true启用 Popover 背景（黑色半透明层）。默认情况下继承相同的应用参数值（true）
backdrop-el字符串
对象		自定义背景元素的 HTML 元素或字符串 CSS 选择器
backdrop-unique布尔值false如果启用，将专门为此模态创建唯一的背景元素
close-by-backdrop-click布尔值true启用后，单击背景后将关闭 popover。默认情况下继承相同的应用参数值
close-by-outside-click布尔值true启用后，单击其外部后将关闭 popover。默认情况下继承相同的应用参数值
close-on-escape布尔值false启用后，按 ESC 键盘键将关闭 popover
animate布尔值true是否应该使用动画打开/关闭模态
container-elHTMLElement
字符串		挂载模态的元素（默认为应用程序根元素）

Popover 事件

事件说明
<f7-popover> 事件
popover:open当 Popover 开始其打开动画时，将触发事件
popover:opened当 Popover 完成其打开动画后，将触发事件
popover:close当 Popover 开始其关闭动画时，将触发事件
popover:closed当 Popover 完成其关闭动画后，将触发事件

Popover v-model

Popover 组件支持 opened prop 上的 v-model

<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

您可以控制 Popover 状态，打开和关闭它

示例

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>
改进此文档
此页面上