弹出框(Popover)

当您希望用户点击/轻击DOM元素/组件时，菜单（或任何内容）显示在弹出窗口上，应使用QPopover。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QPopover'],

  // optional if you want to use
  // directive `v-close-overlay`
  directives: ['CloseOverlay']
}

基本用法

在下面的例子中，我们使用按钮（作为目标），当点击/轻击它时，Quasar将显示一个列表。

您可以用您喜欢的任何DOM元素或组件替换QBtn和列表。

<!--
  目标按钮（可以是其他任何东西）
  必须是DOM层次结构上QPopover的直接父元素。
-->
<q-btn label="Email">
  <!-- 目标的直接子元素 -->
  <q-popover>
    <!--
      构成弹出框的DOM元素，
      在此例中是一个列表：
    -->
    <q-list separator link>
      <!-- 注意会关闭弹出框的`v-close-overlay` -->
      <q-item v-close-overlay @click.native="doSomething">
        ...
      </q-item>
    </q-list>
  </q-popover>
</q-btn>

这个想法是将QPopover放置在作为触发器的DOM元素/组件中，就像直接子元素一样。 不用担心QPopover内容会从容器继承CSS，因为QPopover将作为<body>的直接子节点注入。

重要
在浏览器中，点击<ESCAPE>键也会关闭了QPopover。

通过v-model切换

<template>
  <div>
    <q-btn color="primary" @click="showing = true" label="Show" />
    <q-btn color="primary" @click="showing = false" label="Hide" />

    <div>
      ...
      <q-popover v-model="showing">...</q-popover>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showing: false
    }
  }
}
</script>

Vue属性

Vue属性 类型 说明
anchor 对象 形式为bottom left的字符串（垂直水平）
self 对象 形式为top left的字符串（垂直水平）
max-height 字符串 弹出框内容的可选最大高度。例如：500px
touch-position 布尔 从用户点击/轻击锚点的位置打开弹出窗口。
fit 布尔 弹出框将min-width设置为与容器的width相同。
disable 布尔 当设置为“true”时，弹出框不会被触发。
offset 2个数字的数组 水平和垂直偏移（以像素为单位）。例如：[18,18]。
disable 布尔 禁用弹出窗口

Vue方法

方法 说明
show 打开弹出框。在弹出框打开后需要一个可选的Function参数。
hide 关闭弹出框。在弹出框关闭后触发一个可选的Function参数。
toggle 切换打开/关闭弹出状态。 弹出框切换后触发一个可选的Function参数。

Vue事件

Vue方法 说明
@show 打开弹出框后触发。
@hide 关闭弹出框后触发。

处理弹出框关闭

默认情况下，点击/轻按弹出框内容将关闭它。但是，如果您希望弹出框r内容中的元素关闭它，请使用Quasar指令v-close-overlay。

处理定位

QPopover的位置可以自定义。它记录了可选的Vue属性anchor和self。看demo的演示。

计算QPopover弹出窗口的最终位置，使其显示在可用的屏幕上，在必要时切换到右侧 和/或 顶部。

QPopover触发打开时，如果您希望QPopover从触摸/点击点出现，则使用布尔Vue属性touch-position：

<q-popover touch-position>
  ...
</q-popover>

此demo为页面中心的大图指定了touch-position属性, 。

通知框 提示框