epg-focus-vue

简介

epg-focus-vue插件是基于 VUE 开发的，可应用于使用遥控、键盘等控制元素节点获焦失焦的场景的插件。根据焦点元素在页面的坐标及尺寸就近移动页面焦点。

版本差异

1.x 版本

1. 该版本基于 vue2、vue-router 开发；
2. 在布局上，如果水平方向没有交集，则视为上下层布局；
3. 该版本不支持划定区域group中嵌套group区域的布局方式；
4. 该版本不支持入口app.vue文件中的routeview外存在固定items节点；
5. 按键响应相关键值请参考按键事件，暂不支持配置；
6. 与路由的 keepAlive 相关内容关联性差；
7. 嵌套路由视图、命名视图兼容异常。

2.x 版本

1. 该版本基于 vue2、vue-router、vueX 开发；
2. 重构焦点计算方法；
3. 变更插件部分属性方法；
4. 在布局上，如果水平方向没有交集，则视为上下层布局；
5. 该版本支持划定区域group中嵌套group区域的布局方式，节点的data-group属性仅需指向直属group即可；
6. 按键 Maps 可配置；
7. 增加路由 keepAlive 相关处理逻辑；
8. 必要情况下可以使用group矫正区域划定计算。

3.x 版本

1. 该版本基于 typescript、vue3、vue-router、pinia 开发；
2. 包含 2.x 版本所有功能；
3. 重定义 group、sign 等属性的定义赋值形式，将原有 dataset 形式改为自定义指令修饰符形式；
4. 变更插件部分属性方法；
5. 重构路由视图区域间焦点移动逻辑；
6. 不同命名视图中焦点响应方法可以自定义。

焦点管理

焦点的注册、更新、删除与自定义指令所绑定的元素节点的挂载、更新、移除相对应；

1. 节点绑定
2. 判断所属区域，进入对应区域处理逻辑
3. 根据data-popup属性，进入默认层级或自定义层级处理（对应 3.x 版本的 popup）
4. 根据data-group属性，将节点推入默认列表或自定义的 group 列表（对应 3.x 版本的 group）
5. 根据data-sign属性，同时将节点推入相关的标记列表（对应 3.x 版本的 sign）
6. 节点数据更新时，直接调用节点更新逻辑更新绑定数据对象
7. 节点移除时，从对应列表中将该节点移除

移动规则

1. 两个焦点水平方向上无交集，则通过上下移动切换焦点；
2. 两个交点水平方向上有交集，则可以通过左右移动切换焦点；
3. 就近原则；优先移动到指定方向最近的一个焦点；
4. 交集多的优先原则；如果多个焦点满足就近原则，优先移动到交集更多的焦点；
5. 左/上优先原则；在焦点移动过程中，如果多个焦点到该焦点最近距离相等，则优先移动到左/上侧的焦点；
6. 右/下优先原则；以任意基准点作参考，查询焦点时，如果多个焦点到该基准点最近距离相等，则优先移动到右/下侧的焦点
7. 从一个焦点移动到新的区域或 group 范围时；向右/下移动到新区域，移动到区域内左上角的焦点，向左移动到新区域，移动到区域内右上角的焦点，向上移动到新区域，移动到区域内左下角的焦点；
8. 在自适应布局中，如果获取到节点尺寸出现小数，会导致计算异常，建议两节点之间至少间隔1px来避免计算异常问题。

页面布局

最新版本的插件优化了对嵌套路由、命名视图使用的支持，页面布局区域划分规则如图：

1、区域划分

根据Vue Router的相关应用，对页面的视图区域划分为三种区域：

• 公共区域：页面模版router-view外的区域
• 命名路由区域：页面 router

2、区域层级划分

页面中通过给含有相关自定义指令的节点添加data-popup属性来区分不同焦点所属层级，用于区分类似弹窗焦点与普通页面焦点。（对应 3.x 版本的 popup）

• 默认层级：未定义data-popup属性或data-popup属性为空字符串
• 自定义层级：定义data-popup属性（属性值为字符串）

3、层级池管理

层级池中包含焦点列表和多个自定义的 group 列表以及自定义的标记列表，对应关系如图：

参考文档

开发文档

示例

应用示例