vue TV端焦点移动插件
npm：https://www.npmjs.com/package/vue-tv-focusable
文档：https://blog.csdn.net/sllailcp/article/details/109044265
安装
npm i -S vue-tv-focusable
main.js中
import Vue from "vue";
import focusable from 'vue-tv-focusable';
Vue.use(focusable);
tv.component.vue组件中的html(css有点多，此处就不写了)：
<div class="tv-box">
<div class="item-box">
<div class="perspective">
<div class="item" v-focusable v-for="(item,index) of list" :key="index"
@left="left(index,$event)" @right="right(index,$event)" @down="nofocus" @up="nofocus" @click="skip(index)"
:style="{
left: -100 * index - index * 20 +'px',
zIndex: activeIndex === index ? 1100 :1000-Math.abs(activeIndex - index) * 5,
transform: `rotateY(${activeIndex < index ? '-30deg':activeIndex === index?'0deg':'30deg'}) scale(${1-Math.abs(activeIndex - index)*0.05})`,
}">
<img :src="item.url"/>
</div>
</div>
</div>
</div>
tv.component.vue组件中的js
created() {
this.$nextTick(() => {
this.$tv.init({ distanceToCenter:true }); // 焦点居中
this.$tv.setScrollEl(document.querySelector('.item-box')); // 设置滚动的div
this.$tv.requestFocus(this.$tv.getElementByPath("//div[@class='perspective']/div[3]"));// 初始化第3个div聚焦
})
},
destroyed() {
// 组件销毁，重置distanceToCenter的默认值，默认：false
this.$tv.init({ distanceToCenter:false });
},
methods:{
skip(id){ // 按ok键跳转到详情页面
this.loadingShow = true;
this.$router.push({"path":"/detail",query:{id}})
},
nofocus(event){ this.$tv.requestFocus(event.target); },
right(index, event){
if(index === this.list.length - 1 ){return;}
this.activeIndex = index + 1;
},
left(index,event){
if(index === 0 ){return;}
this.activeIndex = index - 1;
}
}
解释：
1.指令v-focusable设置可获取焦点的div
2.添加自定义事件@left,@right，按左右按键来计算当前层级以及缩放比例
3.添加自定义事件@up,@down，按上下按键的时候阻止焦点跳动
4.添加click事件，按ok键盘的时候跳转详情页
最终界面：
86.gif
