上下文菜单(Context Menu)

此组件允许您在用户执行右键单击（或长按可触摸设备）时显示上下文菜单（弹出窗口），而不是默认的浏览器行为。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QContextMenu'],
  directives: ['CloseOverlay']
}

基本用法

上下文菜单可包含任何内容。在下面的例子中，我们显示一个菜单。

<q-context-menu>
  <q-list link separator style="min-width: 150px; max-height: 300px;">
    <q-item v-close-overlay @click.native="showToast()">
      <q-item-main label="Label" sublabel="Value" />
    </q-item>

    <q-item v-close-overlay @click.native="showOtherToast()">
      <q-item-main label="Other Label" sublabel="Other Value" />
    </q-item>
  </q-list>
</q-context-menu>

计算弹出窗口的位置，以便显示在可用的屏幕上，在必要时改变边框（右/左 和/或 上/下方向）。
在弹出窗口外单击/轻击将关闭上下文菜单。

注意“v-close-overlay”指令。当应用于弹出式（Popover，Modal）中的任何元素时，就像在这种情况下一样，这个指令会关闭上下文菜单。

重要
在移动应用和用户点击手机/平板电脑后退按钮时，上下文菜单将自动关闭。
当在桌面浏览器上，用户点击<ESCAPE>键，上下文菜单将自动关闭。

Vue属性

Vue属性 类型 说明
disable 布尔 禁用或不禁用

QContextMenu还支持一个布尔’v-model’来控制打开/关闭状态。

Vue方法

Vue方法 说明
show() 打开上下文菜单
hide() 关闭上下文菜单

Vue事件

Vue方法 说明
@show 显示时触发。
@hide 关闭/隐藏时触发。
处理后退按钮 面包屑