vue中将新添加的div标签自动定位到可视区域内

最新推荐文章于 2024-06-06 17:32:34 发布

HeWar_

最新推荐文章于 2024-06-06 17:32:34 发布

阅读量942

点赞数

文章标签： vue.js javascript 前端 es6

本文链接：https://blog.csdn.net/HeWar_/article/details/132495678

版权

可以结合使用Vue的ref和scrollIntoView()方法来实现

<template>
  <div>
    <button @click="addDiv">添加新的<div>标签</button>
    <div ref="container" class="container">
      <div v-for="（item,index) in divs" :key="index" ref="divElement" class="div-element">
        <!-- 此处为动态添加的div内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      divs: []
    };
  },
  methods: {
    addDiv() {
      this.divs.push({name:'小明'})
      this.$nextTick(() => {
        const divElement = this.$refs.divElement[this.$refs.divElement.length - 1]; 
        //this.$refs.divElement.length - 1   取的是该数组中的最后一个
        if (divElement) {
          divElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
        }
      });
    }
  }
};
</script>