- 综合排序
- 最热优先
- 最新优先
巧妙实现右键菜单功能，提升用户操作体验
菜单界面及交互优化为了使菜单更加直观，我们在模板中定义了菜单的结构及样式：模板部分<div v-if="showContextMenu" class="<em>context-menu</em>" :style 样式设计.context-menu { position: absolute; background-color: #fff; border: 1px solid #ddd; border-radius : 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1000;}.context-menu ul { list-style: none ; margin: 0; padding: 0;}.context-menu li { padding: 10px 20px; cursor: pointer; transition: background-color 0.2s;}.context-menu li:hover { background-color: #f5f5f5;}这段样式保证了菜单的视觉清晰度，并在选项上增加了悬浮效果，提升用户体验。
45810编辑于 2024-11-22- 来自专栏全沾开发(huā)
如何从0开发一个Atom组件
也就是上边说到的那个方法，可以返回一个JSON对象供下次激活后使用 自定义快捷键对应的事件名: 每次Package被触发对应快捷键时都会执行的方法 menus 这里存放的是在应用菜单和编辑区域菜单栏的配置文件 { "context-menu "command": "first-package:toggle" } ] } ] } ] } context-menu 同样的，context-menu会区分两个环境，text-editor和workspace。 spec 这里存放的是一些测试用例，创建Package会生成一些默认的断言。 写测试确实是一个好习惯。
1.7K50发布于 2018-04-12 - 来自专栏喵喵侠的社区活动征文
油猴脚本：markdown生成带网页标题的链接
// @author Cooper// @match *://*/*// @grant none// @run-at context-menu// = // @author Cooper// @match *://*/*// @grant none// @run-at context-menu// = @run-at这个很关键，就是你的脚本的运行方式，我这里写的context-menu，代表的是右键运行。
93710编辑于 2024-08-03 - 来自专栏全沾开发(huā)
如何从0开发一个Atom组件
也就是上边说到的那个方法，可以返回一个JSON对象供下次激活后使用 自定义快捷键对应的事件名: 每次Package被触发对应快捷键时都会执行的方法 menus 这里存放的是在应用菜单和编辑区域菜单栏的配置文件 { "context-menu "command": "first-package:toggle" } ] } ] } ] } context-menu menu则是出现在Atom主菜单栏上： image.png 同样的，context-menu会区分两个环境，text-editor和workspace。
1.1K30发布于 2019-12-09 - 来自专栏喵喵侠的社区活动征文
油猴脚本：快速打开粘贴的多个网址
批量打开多个网址，支持设置时间间隔// @author 喵喵侠// @match *://*/*// @grant none// @run-at context-menu 批量打开多个网址，支持设置时间间隔// @author 喵喵侠// @match *://*/*// @grant none// @run-at context-menu
1.3K00编辑于 2024-08-04 - 来自专栏dylanliu
使用 TamperMonkey 增强生产力
@run-at 定义脚本的运行时机，支持 document-start, document-body, document-end, document-idle(default), context-menu
1.4K10编辑于 2022-09-07 - 来自专栏乐百川的学习频道
做一个统计单词数目的Atom插件
默认的文件如下，其中context-menu设置上下文菜单，也就是右键打开的菜单；menu设置菜单项中打开的菜单。 # See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details 'context-menu
1K100发布于 2018-01-09 - 来自专栏多棒的前端专栏
electron开发技术知识点笔记
BrowserWindow.getAllWindows().length === 0) { createWindow(); }});webContents 事件// 控制右键操作wc.on('context-menu 1', click: function () { console.log(1111); } }, {role: 'editMenu'}]);// 控制右键操作 wc.on('context-menu
1.7K50编辑于 2022-10-21 打造视觉和交互的极致体验：样式优化与动态效果实现
右键菜单的定位与交互<div v-if="showContextMenu" class="<em>context-menu</em>" :style="{ top: contextMenuPos.y +
56200编辑于 2024-11-28- 来自专栏编程
Typora 保姆级安装教程
mode */ .on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); } header, .context-menu background-color: var(--side-bar-bg-color); } .md-lang { color: #b4654d; } .html-for-mac .context-menu
49610编辑于 2024-10-28 - 来自专栏趣谈前端
推荐!ant-simple-pro2.0正式发布，助力vue3社区
// 如下代码来自ant-simple-pro import createContextMenu from '@/components/context-menu/create-context-menu'
1.3K10发布于 2021-07-12 - 来自专栏TopFE
最新Tampermonkey 中文文档解析（附基础案例和高级案例）
事件被触发时或者之后注入 // @run-at document-idle // 当DOMContentLoaded事件被触发后被注入 如果没有@run-at标签也是在此时注入 // @run-at context-menu // 当点击浏览器上下文菜单时被注入（仅仅是桌面Chrome-based浏览器） // 注意：如果使用了context-menu @include和@exclude的变量都将被忽略，但是未来可能会改变
6.8K11编辑于 2022-01-24 - 来自专栏积跬Coder
Tampermonkey的安装与使用
@run-at context-menu 如果在浏览器上下文菜单中单击该脚本（仅限基于 Chrome 的桌面浏览器），则会注入该脚本。
3K40发布于 2021-06-10 - 来自专栏前端F2E
vite入如何引入Tailwindcss
move: 'move', help: 'help', 'not-allowed': 'not-allowed', none: 'none', 'context-menu ': 'context-menu', progress: 'progress', cell: 'cell', crosshair: 'crosshair',
2.6K20编辑于 2022-08-19 - 来自专栏JavaScript高级程序设计
Canvas绘制可变换矩形的知识点及绘制思路
链接及状态 context-menu 指针下有可用内容目录。 help 指示帮助。 pointer 悬浮于连接上时，通常为手。 progress 程序后台繁忙，用户仍可交互 (与 wait 相反)。
1.3K20编辑于 2022-07-15 - 来自专栏全栈程序员必看
JavaFX+Jfoenix 学习笔记（四）–MenuBar菜单栏
-fx-font-size:12; } .zkh_MenuItem{ -fx-padding: 8 60 8 30; -fx-font-size:12; -fx-cursor:hand; } .context-menu
3.9K20编辑于 2022-11-17 - 来自专栏TopFE
使用 Tampermonkey 编写高级跨网站自动化任务脚本
事件被触发时或者之后注入 // @run-at document-idle // 当DOMContentLoaded事件被触发后被注入 如果没有@run-at标签也是在此时注入 // @run-at context-menu // 当点击浏览器上下文菜单时被注入（仅仅是桌面Chrome-based浏览器） // 注意：如果使用了context-menu @include和@exclude的变量都将被忽略，但是未来可能会改变
6.5K10编辑于 2022-01-24 - 来自专栏学习
关于Browser use控制浏览器，核心代码之DOM树的构建以及DOM元素渲染
'copy', // 复制操作 'alias', // 创建别名 'all-scroll', // 可滚动内容 'col-resize', // 列宽调整 'context-menu
78810编辑于 2025-06-12 - 来自专栏Python 爬虫
【JS 逆向百例】浏览器插件 Hook 实战，亚航加密参数分析
有五个值可选：document-start：网页开始时；document-body：body出现时；document-end：载入时或者之后执行；document-idle：载入完成后执行，默认选项；context-menu
6.8K00发布于 2021-10-14 - 来自专栏Python 爬虫
JS 逆向之 Hook，吃着火锅唱着歌，突然就被麻匪劫了！
有五个值可选：document-start：网页开始时；document-body：body出现时；document-end：载入时或者之后执行；document-idle：载入完成后执行，默认选项；context-menu
2.2K10发布于 2021-09-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号