vue鼠标悬浮切换文字和图片

Posted 2020-12-12 ymbcc

今天写页面是需要一个功能，列表全部显示图片，鼠标悬浮后显示文字，未悬浮的显示图片，始终有一项显示为文字

 

 

当鼠标悬浮至其他项时，如果不对其他项进行鼠标悬浮操作，鼠标移开后，该项依旧显示文字

 

 

 

<div v-for="(item, index) in itemList">
     <lable>{{ item.name }}</lable>
     <lable><img :src="require(‘../../assets/images/base/‘+ item.url + ‘_normal.png‘)"></lable>
 </div>

因为图片是不同的，所以url地址不能写死

在export default 的data中输入以下内容：

url为你图片的url名称

data () {
      return {
        itemList: [
          { index: 1, name: ‘风速‘, url: ‘1033‘ },
          { index: 2, name: ‘空气温度‘, url: ‘1001‘ },
          { index: 3, name: ‘空气湿度‘, url: ‘1002‘ },
          { index: 4, name: ‘露点‘, url: ‘1036‘ },
          { index: 5, name: ‘光照强度‘, url: ‘1030‘ },
          { index: 6, name: ‘紫外线强度‘, url: ‘1031‘ },
          { index: 7, name: ‘光合有效辐射‘, url: ‘1032‘ },
          { index: 8, name: ‘风向‘, url: ‘1034‘ },
          { index: 9, name: ‘雨量‘, url: ‘1035‘ },
        ],
      }
    },

页面将会把所有内容通过v-for循环渲染，

给节点加鼠标悬浮事件，以及label的动态v-show

<div v-for="(item, index) in itemList"
            @mouseenter="enters(index)">    <!--新增鼠标悬浮事件-->

　　 <lable v-show="switchNice[index].arry">{{ item.name }}</lable> 
　　 <lable v-show="switchNice[index].arrys"><img :src="require(‘../../assets/images/base/‘+ item.url + ‘_normal.png‘)"></lable> 

</div>

<!-- 在data中添加swicthNice，绑定vue中的v-show，swicthNice的数组长度和itemList数组长度一致 -->
switchNice: [
  { arry: true, arrys: false },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true },
  { arry: false, arrys: true }
],


methods: {
　　

enters(index) {
  this.switchNice[index].arrys = false;  // 当前鼠标悬浮所在的图片隐藏
  for (let m = 0; m < this.switchNice.length; m++) { // 循环switchNice数组
    if (m === index) {
      this.switchNice[m].arry = true;  // 当数组和index相同时，文字显示
    } else {  // 不同时，图片显示，文字隐藏
      this.switchNice[m].arry = false;
      this.switchNice[m].arrys = true;
    }
  }
},

}

 

 

如果需要鼠标悬浮显示文字，鼠标退出，显示图片，可以给div在加一个鼠标离开事件

@mouseleave="leaver(index)

methods： {
　　leaver(index) {
  　　this.switchNice[index].arry = false; // 文字隐藏
　　　this.switchNice[index].arrys = true; //图片显示
}, }

上面的鼠标悬浮enters事件也需要改成下列内容

methods： {
　　enters(index) {

　　　this.switchNice[index].arrys = false; //图片隐藏
     this.switchNice[index].arry = true; // 文字显示

}, }