[TOC] ## 環境要求 * npm * vue * vuex * vue-router ## 安裝 ### 下載安裝依賴 ~~~ npm install vue-epg ~~~ ### 在vue項目中初始化 ~~~ 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) //配置結束 ~~~ ## 獲取實例 插件安裝完成后可調用實例方法： ~~~ this.$service this.$service.pointer //當前焦點對象 this.$service.move //移動方法 this.$service.clear() //重置服務，通常在頁面切換時觸發 1.0.15版之前為自動觸發，現以移除自動重置，需要在路由守衛中自定義觸發 this.$service.getEleByPath //通過xpath獲取 元素 el this.$service.getPointerPosition //獲取焦點 xpath ~~~