需求: 电子看板, 菜单可以通过遥控操作切换;
项目本是基于 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