vue-epg , 电视遥控器控制web 页面焦点

需求: 电子看板, 菜单可以通过遥控操作切换;

项目本是基于 vue 构建的, 找了很久,通过 Google 才找到的, vue-epg

文档地址: https://www.kancloud.cn/koala-gc/vue-epg/758916

简单的使用方法直接摘过来:

1. 安装依赖

npm install vue-epg --save

2. main.js 中加入

// import {VueEpg} from 'vue-epg'  //引入组件
import VueEpg from 'vue-epg'  //作者文档是按照上面那样写的,不行

//定义并实例化 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)

//配置结束

3. 页面中使用

// template 其中主要是 加入 "v-item" 指令,即可定义焦点
<div
      v-items
      v-for="(item, key) in menus"
      class="card"
      :tabindex="key + 1"
      :id="'card'+key"
      :key="key"
      @click="$router.push(`/board/${key}`)"
    >

// css 这里的类名需要和 main.js 中的 focus_class 对应,即聚焦时的样式
  .focus {
    transform: scale(1.05);
    outline: 5px solid #00bd55;
  }

4. 效果: 电视机上实测 chrome浏览器下遥控器切换焦点正常

*** 期间还找到另外一个, 以后有空可以试试, 看起来写法是模仿 vue的, 不知道能不能结合起来, 看起来略麻烦 https://zexiplus.github.io/tvvm/pages/doc.html#focus-control

vue-epg , 电视遥控器控制web 页面焦点

猜你喜欢