(九)ContextMenu及其使用

1、ContextMenu

当view被长时间按下时候弹出的菜单就可以成为ContextMenu,即上下文菜单,下面简单示例

首先,确定菜单里面的内容。这需要在onContextMenu()中实现

public void onCreateContextMenu(ContextMenu menu, View v,
   ContextMenu.ContextMenuInfo menuInfo) {

  menu.add(0, GREEN, 0, "绿色背景");
  menu.add(0, RED, 0, "红色背景");
  menu.add(0, White, 0, "白色背景");

 }

其次,确定当按钮按下时候的操作,比如改变view背景色

public boolean onContextItemSelected(MenuItem mi) {
		switch (mi.getItemId()) {
		case GREEN:
			textview.setBackgroundColor(Color.GREEN);
			break;

		}

最后,把需要用到contextMenu的view进行注册

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		textview = (TextView) this.findViewById(R.id.textview);
		// 注册上下文"菜单"
		this.registerForContextMenu(textview);

	}


 

 

 

### 如何在 Vue 2 项目中使用 `v-contextmenu` `v-contextmenu` 是一个用于创建右键菜单的 Vue 插件,能够方便地集成到基于 Vue 的应用程序中。为了成功安装并配置此插件,在 Vue 2 中实现自定义上下文菜单功能,可以遵循如下指南。 #### 安装依赖 首先需要通过 npm 或 yarn 来安装 `v-contextmenu` 及其样式文件: ```bash npm install v-contextmenu --save ``` 或者如果偏好使用 yarn: ```bash yarn add v-contextmenu ``` #### 导入组件与注册全局指令 接着应该导入必要的模块并将它们应用至整个项目里去。可以在 main.js 文件内完成这一步骤: ```javascript // main.js import VContextmenu from 'v-contextmenu' import 'v-contextmenu/dist/index.css' Vue.use(VContextmenu) ``` 这段代码会把 `VContextmenu` 注册成全局可用的组件,并引入默认的主题样式表[^1]。 #### 创建简单的右键菜单实例 现在已经在项目中集成了该插件,下面展示怎样构建最基础版本的右键点击事件处理逻辑以及对应的菜单项结构: ```html <template> <div @contextmenu="handleContextMenu"> <!-- 需要绑定 contextmenu 事件 --> <!-- 显示位置由 handleContextMenu 函数控制 --> <v-contextmenu ref="contextMenu"> <v-contextmenu-item @click="doSomething">操作一</v-contextmenu-item> <v-contextmenu-item disabled>禁用选项</v-contextmenu-item> <v-contextmenu-submenu title="子菜单"> <v-contextmenu-item @click="anotherAction">子菜单中的动作</v-contextmenu-item> </v-contextmenu-submenu> </v-contextmenu> <p>在此处尝试右击鼠标...</p> </div> </template> <script> export default { methods: { handleContextMenu(event) { event.preventDefault(); this.$refs.contextMenu.show(event); }, doSomething() { alert('执行了某个特定的操作'); }, anotherAction(){ console.log('触发了另一个行为') } } } </script> ``` 上述模板部分展示了如何监听原生 DOM 上下文菜单 (`@contextmenu`) 并阻止浏览器默认行为;同时利用 `$refs` 访问 `<v-contextmenu>` 组件的方法来显示定制化的弹出式菜单。而 script 块则包含了响应不同菜单条目的回调函数定义。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值