TV-Focusable

下载：npm i vue-tv-focusable

引用：

import focusable from 'vue-tv-focusable'

Vue.use(focusable)

元素需要可获取焦点需要给元素添加v-focusable

聚焦的元素会添加一个‘focus’的类名，也可以自己定义

指定焦点聚焦某个元素用requestFocus(element,bool);bool默认为true，可改为false

         eg1:this.$tv.requestFocus(this.$refs.myDiv)

        eg2:this.$tv.requestFocus(this.$tv.getElementByPath('//div[@class="demo"]/div[2]'))

        eg3:this.$tv.requestFocus(this.$tv.getElementByPath(this.$tv.readXpath(document.querySelector('.item2'))

ps:this.$tv.getElementByPath和this.$tv.readXpath可以反向使用获取到元素的路径

遥控器方向键对应的方法为：@up,@down,@left,@right

表单控件是否可以输入是用fromAutofocus来控制，TV的表单是需要按确定键后在填写的

init里面可以修改默认的焦点类名，自定义键值，自定义找焦点方式，边缘距离

        全局：

                const vm = new Vue

                vm.$tv.init({

                        focusClassName:'onfocus',//自定义焦点类名

                        KEYS:{

                                KEY_LEFT:[],//左键值

                                KEY_RIGHT:[],//

                                KEY_DOWN:[],//

                                KEY_ENTER:[],//enter事件

                        },

                        longPressTime:800,//长按响应时间，毫秒，默认500

                })

为了不影响全局配置，在单页面的配置要在销毁页面重置

        eg:在created里面使得findFocusType=0那么在destoryed里面this.$tv.resetFindFocusType()

        ps:在findFocusType= 1时即默认状态下用不到initDis参数，在findFocusType = 0时,initDis = 49。initDis参数是用来判断下一个div的横向中心距离大概前焦点元素的中心线距离，如果大于initDis的值就认为他们不再一个水平线，在遥控器控制下一个的时候就会跳转的另外一个

边缘距离是需要用offsetDistance控制到达边缘的时候距离边缘的像素

局部滚动用setScrollEl=需要滚动的元素，在页面销毁的时候需要重置元素用resetScrollEl()

获取焦点的事件是@onFocus，失去焦点的事件是@onBlur,长按事件为@longPress

通过设置scrollSpeed可以控制滚定速度，单位毫秒，越大滚动的越满

uniapp打包app会去掉浏览器对象但是tv上需要这些方法所以我们需要先在manifest里面把base修改为'./'然后打包成h5，然后在把h5打包成app

h5打包app：首先新建一个5+app项目，然后把除了manifest的文件都删掉，把打包好的h5文件复制过来然后正常打包