vue 让list列表中的某个元素滚动到可视区域
网上有很多方法,但此处只记录一个亲测有效的方法1、通过让元素获得焦点其原理是通过让元素支持focus事件,让元素获取焦点,div正常情况下是无法像input元素一样获得焦点的,但是正如我们可以通过给div加上conteneditable属性让div元素变得可以编辑一样,在这里我们也可以通过给div元素加上tabindex = "0"的属性让元素可以获取焦点:简单示例:<...
·
网上有很多方法,但此处只记录一个亲测有效的方法
1、通过让元素获得焦点
其原理是通过让元素支持focus事件,让元素获取焦点,div正常情况下是无法像input元素一样获得焦点的,但是正如我们可以通过给div加上conteneditable属性让div元素变得可以编辑一样,在这里我们也可以通过给div元素加上tabindex = "0"的属性让元素可以获取焦点:
简单示例:
<div ref="targetBox" tabindex = "0"></div>
this.$refs.targetBox.focus();
简单说一下我的应用场景,如下图所示。通过后端获取的list,点击外面的船只,希望左侧的船舶列表对应的滚动到当前点击的船舶。
实现方法:
<li
v-for="(item, index) in shipList"
:key="index"
:class="selectShip===item.mmsi ?'active': ''"
:ref="selectShip===item.mmsi ?'activeRef': ''"
:tabindex = "selectShip===item.mmsi ? '0' : ''"
>
</li>
watch监控selectShip变化
watch: {
selectShip() {
this.$nextTick(() => {
this.$refs.activeRef[0].focus();
});
}
}
更多推荐
已为社区贡献32条内容
所有评论(0)