上下文菜单(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 关闭/隐藏时触发。