vue-epg解决iptv项目中的焦点获取和移动

Dear 丶 2021-07-24 21:29 508阅读 0赞

最近在做iptv方面的前端工作，遇到一些比较棘手的问题，网上搜也没有搜到多少有用的的知识，在csdn 看到有vue-epg的博文，进去看了一下，讲的很简陋，但是用到的vue-epg的框架让我的工作轻松了很多，项目现在已经上线，对vue-epg框架有了一些浅显的认识，分享出来，希望对大家有点帮助。

# vue-epg框架 #

## 1. 文档地址 ##

[vue-epg文档地址,点击浏览][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: '<App/>'
    })

这样就将vue-epg的包引进来了，接下来就是组主要的如何通过遥控器控制焦点的移动了

页面怎么搭建路由，怎么封装组件我在这里就不啰嗦了，主要说说焦点的问题。

vue-epg里面有个v-items，你想让哪个获取到焦点就给那个元素加一个v-items，跟vue的操作指令有点相似，看一下代码就可以理解。焦点的移动才是关键，vue-epg给出里四个函数up、down、left、right，通过绑定这四个函数就可以控制焦点的移动，在语法上有点像是绑定事件，这个也不是很难理解。但是，如果说获取到的数据很多，渲染完成后页面超过一屏（浏览器可视窗口），当你点击下键焦点移动到一屏之外的元素上时，你会发现页面没有跟着滚动，焦点可以继续向下移动，而页面的滚动距离跟不上焦点移动的距离，就会出现看不到焦点的问题。  
  如何让焦点移动的时候让页面也跟着滚动就是比较重要的问题了，如果你也碰到这个问题，不要慌，看下面：  
[Element.scrollIntoView()][Element.scrollIntoView]  
这个方法可以解决页面不滚动的方法，想看的自己点链接看，我在这里就不多扯，不水字数，要讲就讲干货  
scrollIntoView(true)，元素上边框和浏览器可视窗口上边框对齐，  
scrollIntoView(false)，元素下边框和浏览器可视窗口下边框对齐，  
用vue-epg框架里面的一个方法拿到当前焦点元素，然后给这个元素加上scrollIntoView方法，看代码：

this.$service.pointer.$el.scrollIntoView(true);//当前焦点元素上边框和浏览器可视窗口上边框对齐

大概就这么多吧， 干货也讲完了，不想再写了，但是vue-epg的框架文档很简陋，所以下面铺点我写的小demo，看一下文档再看看这个，效果会好点。  
Home.vue

<template>
        <div class="home">
            <List :data="list"></List>
        </div>
    </template>
    <script>
    import List from '../components/List'
    export default {
        data(){
            return {
                list:[
                    {imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"},
                    {imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4055341298,4125206667&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=333133706,3799233384&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3644647429,363760669&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=187205501,62508223&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627176609,411971384&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=24210266,675748562&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
                    {imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"},
                    {imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4055341298,4125206667&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=333133706,3799233384&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3644647429,363760669&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=187205501,62508223&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627176609,411971384&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=24210266,675748562&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
                    {imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"},
                    {imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4055341298,4125206667&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=333133706,3799233384&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3644647429,363760669&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=187205501,62508223&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627176609,411971384&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=24210266,675748562&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
                    {imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
                ]
            }
        },
        components:{
            List
        }
    }
    </script>
    
    <style scoped>
    
    </style>

List.vue

<template>
       <div class="list">
           <ul>
               <li 
                   class="list_box"
                   v-items
                   @left="left()"
                   @right="right()"
                   @up="up()"
                   @down="down()"
                   v-for="(v,i) in data"
                   :key="i"
                   @click="list(i)"
               >
                   <img :src="v.imgsrc">
               </li>
           </ul>
       </div>
    </template>
    
    <script>
    export default {
       props:{
           data:{
               type:Array,
               required:true
           }
       },
       mounted(){
           let el = document.getElementsByClassName("list_box")[0];
           this.$service.move(el); //vue-epg封装的移动焦点的方法
       },
       methods:{
           left(){
               this.$service.move("left");
           },
           right(){
               this.$service.move("right");
           },
           up(){
               this.$service.move("up");
               this.$service.pointer.$el.scrollIntoView(true);
           },
           down(){
               this.$service.move("down");
               this.$service.pointer.$el.scrollIntoView(true);
           },
           list(i){
               console.log(i);
           }
       }
    }
    </script>
    
    <style scoped>
       .focus{
           border: 5px solid yellow;
           transform: scale(1.1);
           border-radius: 10px;
           box-shadow: 0px 0px 6px 2px #ffff00;
           box-sizing: border-box;
    
       }
       .list li{
           list-style: none;
           float: left;
       }
       .list_box{
           width:200px;
           height:300px;
           background-color: tomato;
           margin :30px;
       }
       .list_box img{
           width:100%;
           height: 100%;
       }
    </style>

main.js在上面刚开始就发了  
在想要不要放截图了，又一想不是动图也看不出来效果，干脆给个压缩包，自己看吧，地址留在评论区喔，刚发上去，审核还没过呢

## 下载地址 ##

[https://download.csdn.net/download/qq\_39200185/12026863][https_download.csdn.net_download_qq_39200185_12026863]

[vue-epg]: https://www.kancloud.cn/koala-gc/vue-epg/758916
[Element.scrollIntoView]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
[https_download.csdn.net_download_qq_39200185_12026863]: https://download.csdn.net/download/qq_39200185/12026863