下载: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文件复制过来然后正常打包