vue中实现通过循环渲染精灵图

描述

通过循环语句将精灵渲染到对应的位置。

思路

首先计算一个图的宽，然后计算每个图之间的距离，将这两个距离相加起来就是下一个图的位置，这里我多实现了当鼠标滑入时修改另一个精灵图的效果，鼠标划出又显示回原来的图。
HTML代码

<template>
  <div class="content">
    <div class="box" v-for="(i,index) in 6" :key="index" @mouseover.prevent="over(index)" @mouseout.prevent="out(index)" >
      <span  alt="" class="icon_img" ></span>
      <div class="icon_name0">{{name}}</div>
    </div>
  </div>
</template>

js代码

 methods:{
    getfor(){
      var spans = document.getElementsByTagName('span')
      //核心代码
      for (var i = 0; i < spans.length; i++) {
        var index = i * 32.2;
        spans[i].style.backgroundPosition = "0 -" + index + "px";

      }
    },
    over(id){//鼠标移入时的操作
      var spans = document.getElementsByTagName('span')
      var index = id * 32.2;
      spans[id].style.backgroundPosition = "-" + 34 + 'px' + " -" + index + "px";

    },
    out(id){//鼠标移出时的操作
      var spans = document.getElementsByTagName('span')
      var indey = id * 32.2;
      spans[id].style.backgroundPosition = "0 -" + indey + "px";
    }

  },
   mounted(){
    this.getfor()
  }

css样式

.content{
  display: flex;
}
.box{
  width: 90px;
  height: 90px;
  background: #f5f5f5;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 10px;
  .icon_img{
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url(../assets/main_category.png) 0 0 no-repeat;
  }
  .icon_name{
    color: #333;
    margin-top: 6px;
    font-size: 12px;
  }
}
.box:hover{
  background:#1DC6BC;
   color: #ffff;
   box-shadow: 2px 4px 5px rgb(11, 156, 148);
}
.box:hover .icon_name{
  color: #ffff;
}

参照的文章：https://blog.csdn.net/qq_41670147/article/details/103191670