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 对应  NUMBERsetKeyBoardEventListener: 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" 指令,即可定义焦点
<divv-itemsv-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