插件:tv-focusable
1、安装vue-tv-focusable
npm i vue-tv-focusable
2、main.js引入插件
import focusable from 'vue-tv-focusable';
Vue.use(focusable);
3、给需要获取焦点的添加 v-focusable
4、自定义获取焦点时的类名,默认focus
this.$tv.focusClassName = "active";
5、指定焦点聚焦到某个元素上
this.$nextTick(() => {
this.$tv.requestFocus(this.$refs.first);
});
6、指定焦点移动到某一个某一个元素上:可以使用 @up,@right,@down,@left 这几个属性来指定按遥控器对应方向键时调用的方法
this.$tv.requestFocus(
this.$refs.two
);
7、实例demo
<template>
<div class="home">
<div class="boxMain">
<div class="public">
<div
class="item one"
v-focusable
ref="first"
@right="right(0)"
@click="goToDetail('00')"
>
<img src="../assets/images/gushi.png" mode="" />
</div>
<div
class="item two"
v-focusable
ref="two"
@click="goToDetail('11')"
>
<img src="../assets/images/ershida.png" mode="" />
</div>
<div class="item two" v-focusable @click="goToDetail('22')">
<img src="../assets/images/lianghui.png" mode="" />
</div>
<div class="item two" v-focusable @click="goToDetail('33')">
<img src="../assets/images/shidian.png" mode="" />
</div>
<div class="item two" v-focusable @click="goToDetail('44')">
<img src="../assets/images/xiangce.png" mode="" />
</div>
<div class="item two" v-focusable @click="goToDetail('55')">
<img src="../assets/images/yuxuetang.png" mode="" />
</div>
<div class="item two" v-focusable @click="goToDetail('66')">
<img src="../assets/images/xinhuashe.png" mode="" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HomeView",
data() {
return {};
},
created() {
// 自定义获取焦点时的类名,默认focus
this.$tv.focusClassName = "active";
// 指定焦点移动到第一个元素上
this.$nextTick(() => {
this.$tv.requestFocus(this.$refs.first);
});
},
methods: {
//去详情
goToDetail(title) {
console.log(title, "4657981320");
},
right(index) {
if (index == 0) {
this.$tv.requestFocus(
this.$refs.two
);
}
},
},
};
</script>
<style lang="less" scoped>
.home {
width: 1280px;
height: 720px;
border: 1px solid red;
overflow: hidden;
background: url("../assets/images/bc.png") no-repeat;
background-size: cover;
.boxMain {
margin: 80px auto;
width: 80%;
.public {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.item {
width: 25%;
height: 240px;
cursor: pointer;
position: relative;
img {
width: 85%;
}
}
.one {
width: 50%;
height: 240px;
cursor: pointer;
position: relative;
img {
width: 93%;
}
}
img {
width: 93%;
height: 85%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.active {
img {
border: 5px solid rgb(255, 186, 57);
transform: translate(-50%, -50%) scale(1.05) !important;
}
}
}
</style>