vue のループを通じてスプライト マップをレンダリングする

説明する

ループステートメントを通じて、スプライトを対応する位置にレンダリングします。

一連の考え

最初に画像の幅を計算し、次に各画像間の距離を計算します。これら 2 つの距離を加算すると、次の画像の位置が決まります。ここでは、マウスをスライドインしたときに別のスプライト画像を変更する効果を実現しました。マウスを移動します。元の画像に戻ります。
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