README.md · wyzhgx/focus-vue

# 简介

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

## 版本差异

### 1.x 版本

1. 在布局上，如果水平方向没有交集，则视为上下层布局；
2. 该版本不支持划定区域`group`中嵌套`group`区域的布局方式；
3. 该版本不支持入口`app.vue`文件中的`routeview`外存在固定`items`节点；
4. 按键响应相关键值请参考[按键事件](https://wyzhgx.gitee.io/epg-focus/config/event.html)，暂不支持配置；
5. 与路由的 keepAlive 相关内容关联性差；
6. 嵌套路由视图、命名视图兼容异常。

### 2.x 版本

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

## 焦点管理

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

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

![焦点注册过程](https://oscimg.oschina.net/oscnet/up-6067f52c222ed7bdc04be05cb5d6372fdca.png "焦点注册过程")

## 移动规则

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

![焦点移动规则](https://oscimg.oschina.net/oscnet/up-3fb0ac51a7d2268ab3b8223d8fc4b46287f.png "焦点移动规则")

## 页面布局

最新版本的插件优化了对嵌套路由、命名视图使用的支持，页面布局区域划分规则如图：  
![epg-focus-vue页面结构划分](https://oscimg.oschina.net/oscnet/up-d5a0bda704bae8322ade0c5a73cc462ece6.png "epg-focus-vue页面结构划分")

### 1、区域划分

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

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

### 2、区域层级划分

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

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

### 3、层级池管理

层级池中包含焦点列表和多个自定义的 group 列表以及自定义的标记列表，对应关系如图：  
![epg-focus-vue 区域层级池](https://oscimg.oschina.net/oscnet/up-efa0441d064db51bf55c8a35cab45337f85.png "epg-focus-vue 区域层级池")

## 参考文档

[开发文档](https://wyzhgx.gitee.io/epg-focus)

## 示例

[应用示例](https://gitee.com/wyzhgx/vuepages)

wyzhgx/focus-vue

简介

发行版

贡献者

近期动态

wyzhgx/focus-vue .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wyzhgx/focus-vue