vue-epg解决iptv项目中的焦点获取和移动
最近在做iptv方面的前端工作，遇到一些比较棘手的问题，网上搜也没有搜到多少有用的的知识，在csdn 看到有vue-epg的博文，进去看了一下，讲的很简陋，但是用到的vue-epg的框架让我的工作轻松了很多，项目现在已经上线，对vue-epg框架有了一些浅显的认识，分享出来，希望对大家有点帮助。
vue-epg框架
1. 文档地址
vue-epg文档地址,点击浏览
2. 使用方法
文档中有两处有错误的地方，第一处在vue项目中初始化，第二处是括号没有闭合
//下面的这句话会报错
import {VueEpg} from 'vue-epg' //引入组件
//改成这样
import VueEpg from 'vue-epg' //引入组件
附上我修改后main的代码
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueEpg from 'vue-epg' //引入组件
Vue.config.productionTip = false
//定义并实例化 VueEpg
const epg = new VueEpg({
focus_class:'focus',
group_name:'.group',
actions:['number'], //自定义的方法，在 组件中需指定，名称对应大写的 KeyActions 的Key 如 number 对应 NUMBER
setKeyBoardEventListener: service=> {
//这里设置各事件监听
//方向 上下左右必须监听 可绑定多个值
document.addEventListener("keydown", event => {
const keyCode = event.keyCode ? event.keyCode : event.charCode ? event.charCode : event.which;
service.keyActions.UP.push(...[19,38]) //数组中的值响应 按下上键的事件
service.keyActions.DOWN.push(...[20,47,40])
service.keyActions.LEFT.push(...[29,21,37])
service.keyActions.RIGHT.push(...[22,32,39])
service.keyActions.ENTER.push(...[73,66,23]) //类似Click 点击
service.keyActions.BACK.push(...[4,27])
service.keyActions.NUMBER=[49,50,51,52,53,54,55,56,57,48,96,97,98,99,100,101,102,103,104,105] //绑定为数字键
service.eventHandler(keyCode) //注册响应
})
}
})
//vue 绑定 epg 实例
Vue.use(epg)
//配置结束
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '这样就将vue-epg的包引进来了，接下来就是组主要的如何通过遥控器控制焦点的移动了
页面怎么搭建路由，怎么封装组件我在这里就不啰嗦了，主要说说焦点的问题。
vue-epg里面有个v-items，你想让哪个获取到焦点就给那个元素加一个v-items，跟vue的操作指令有点相似，看一下代码就可以理解。焦点的移动才是关键，vue-epg给出里四个函数up、down、left、right，通过绑定这四个函数就可以控制焦点的移动，在语法上有点像是绑定事件，这个也不是很难理解。但是，如果说获取到的数据很多，渲染完成后页面超过一屏（浏览器可视窗口），当你点击下键焦点移动到一屏之外的元素上时，你会发现页面没有跟着滚动，焦点可以继续向下移动，而页面的滚动距离跟不上焦点移动的距离，就会出现看不到焦点的问题。
如何让焦点移动的时候让页面也跟着滚动就是比较重要的问题了，如果你也碰到这个问题，不要慌，看下面：
Element.scrollIntoView()
这个方法可以解决页面不滚动的方法，想看的自己点链接看，我在这里就不多扯，不水字数，要讲就讲干货
scrollIntoView(true)，元素上边框和浏览器可视窗口上边框对齐，
scrollIntoView(false)，元素下边框和浏览器可视窗口下边框对齐，
用vue-epg框架里面的一个方法拿到当前焦点元素，然后给这个元素加上scrollIntoView方法，看代码：
this.$service.pointer.$el.scrollIntoView(true);//当前焦点元素上边框和浏览器可视窗口上边框对齐
大概就这么多吧， 干货也讲完了，不想再写了，但是vue-epg的框架文档很简陋，所以下面铺点我写的小demo，看一下文档再看看这个，效果会好点。
Home.vue
List.vue
-
![]()
main.js在上面刚开始就发了
在想要不要放截图了，又一想不是动图也看不出来效果，干脆给个压缩包，自己看吧，地址留在评论区喔，刚发上去，审核还没过呢
下载地址
https://download.csdn.net/download/qq_39200185/12026863