vue 让list列表中的某个元素滚动到可视区域

网上有很多方法，但此处只记录一个亲测有效的方法

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();
      });
    }
}