浏览器应用PC场景下的键鼠适配之右键交互及hover提示实现

HarmonyOS

沉默如海

2024-06-11 20:40:01

3.4w浏览

回答 1

按赞同

按时间

踮脚在树梢上

在PC场景下，鼠标左键常常意味着用户要触发点击处的功能（通常是单一明确的）；而鼠标右键，则是给用户提供更多的选项，让用户有更多的可选操作项；

而hover提示，则是当前用户鼠标hover到某个控件时，给出相关功能的提示信息，让用户快速了解这块交互能力；

本篇总结，就是介绍一下浏览器应用在右键交互及hover提示方面的实现；

鼠标右键的实现

在PC上，鼠标右键呼出相关菜单项，是非常常见的场景；浏览器应用在网页标题栏的相关操作，就是典型场景：

右键菜单的实现，分解的话，有3个核心步骤：

1.监听右键，2.展示菜单，3.是菜单项的逻辑处理

在使用系统api上，主要使用的是菜单控制相关的bindContextMenu；(https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md/#%E5%B1%9E%E6%80%A7)

名称	参数类型	描述
bindContextMenu⁸⁺	content: CustomBuilder, responseType: ResponseType options?: ContextMenuOptions	给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 responseType: 菜单弹出条件，长按或者右键点击。 options: 配置弹出菜单的参数。

核心代码：

bindContextMenu(this.MenuBuilder(), ResponseType.RightClick)

当前，复杂的业务处理逻辑，需要业务进行处理，工作量还是有一些的；

Hover提示信息的实现

Hover通常在PC场景下，用于提示用户相关操作的说明信息，是同用户交互常见场景；

浏览器的典型应用场景如下：

在实现上主要用到的是popup弹框；

https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md/

具体实现时，使用onHover进行事件监听，使用.bindPopup进行弹出相关提示信息

.onHover(isHover => { 
 
  this.state.isHover = isHover; 
 
}) 
 
  .bindPopup(this.state.isHover ?? false, { 
 
    builder:this.popupBuilder(), 
 
    placement:Placement.Bottom, 
 
    enableArrow:false, 
 
    mask:false, 
 
    popupColor: $r('sys.color.ohos_id_color_dialog_bg') 
 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.