简介
epg-focus-vue插件是基于 VUE2.x 开发的，可应用于使用遥控、键盘等控制元素节点获焦失焦的场景的插件。根据焦点元素在页面的坐标及尺寸就近移动页面焦点。
版本差异
1.x 版本
- 在布局上，如果水平方向没有交集，则视为上下层布局；
- 该版本不支持划定区域
group中嵌套group区域的布局方式； - 该版本不支持入口
app.vue文件中的routeview外存在固定items节点； - 按键响应相关键值请参考按键事件，暂不支持配置；
- 与路由的 keepAlive 相关内容关联性差；
- 嵌套路由视图、命名视图兼容异常。
2.x 版本
- 重构焦点计算方法；
- 变更插件部分属性方法；
- 在布局上，如果水平方向没有交集，则视为上下层布局；
- 该版本支持划定区域
group中嵌套group区域的布局方式，节点的data-group属性仅需指向直属group即可； - 按键 Maps 可配置；
- 增加路由 keepAlive 相关处理逻辑；
- 必要情况下可以使用
group矫正区域划定计算。
焦点管理
焦点的注册、更新、删除与自定义指令所绑定的元素节点的挂载、更新、移除相对应；
- 节点绑定
- 判断所属区域，进入对应区域处理逻辑
- 根据
data-popup属性，进入默认层级或自定义层级处理 - 根据
data-group属性，将节点推入默认列表或自定义的 group 列表 - 根据
data-sign属性，同时将节点推入相关的标记列表 - 节点数据更新时，直接调用节点更新逻辑更新绑定数据对象
- 节点移除时，从对应列表中将该节点移除
移动规则
- 两个焦点水平方向上无交集，则通过上下移动切换焦点；
- 两个交点水平方向上有交集，则可以通过左右移动切换焦点；
- 就近原则；优先移动到指定方向最近的一个焦点；
- 交集多的优先原则；如果多个焦点满足就近原则，优先移动到交集更多的焦点；
- 左/上优先原则；在焦点移动过程中，如果多个焦点到该焦点最近距离相等，则优先移动到左/上侧的焦点；
- 右/下优先原则；以任意基准点作参考，查询焦点时，如果多个焦点到该基准点最近距离相等，则优先移动到右/下侧的焦点
- 从一个焦点移动到新的区域或 group 范围时；向右/下移动到新区域，移动到区域内左上角的焦点，向左移动到新区域，移动到区域内右上角的焦点，向上移动到新区域，移动到区域内左下角的焦点；
- 在自适应布局中，如果获取到节点尺寸出现小数，会导致计算异常，建议两节点之间至少间隔
1px来避免计算异常问题。
页面布局
最新版本的插件优化了对嵌套路由、命名视图使用的支持，页面布局区域划分规则如图：
1、区域划分
根据Vue Router的相关应用，对页面的视图区域划分为三种区域：
- 公共区域：页面模版
router-view外的区域 - 命名路由区域：页面 router
2、区域层级划分
页面中通过给含有相关自定义指令的节点添加data-popup属性来区分不同焦点所属层级，用于区分类似弹窗焦点与普通页面焦点。
- 默认层级：未定义
data-popup属性或data-popup属性为空字符串 - 自定义层级：定义
data-popup属性（属性值为字符串）
3、层级池管理
层级池中包含焦点列表和多个自定义的 group 列表以及自定义的标记列表，对应关系如图：
