vue 判断两次点击是同一个元素（点击高亮）

前端小怪兽zmy

已于 2022-11-17 15:46:17 修改

阅读量763

点赞数

分类专栏：实习中遇到的新手问题文章标签： vue.js javascript 前端

于 2022-10-28 11:32:02 首次发布

本文链接：https://blog.csdn.net/zmy967131/article/details/127568325

版权

实习中遇到的新手问题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需求是：点击图标A，图标A高亮，再点击一次，图标A取消高亮。

点击图标A，图标A高亮；再点击图标B，图标A取消高亮，图标B高亮

    highlight(event) {
      let className = JSON.stringify(event.target);
      if (this.prevMenuClass != className) {
        // alert("跟上次不一样")
        event.target.style.backgroundColor = "rgba(128,128,128,.5)"
        this.prevMenuClass = className;
        for (let i = 0; i < this.$refs.header.children.length; i++) {
          this.$refs.header.children[i].style.backgroundColor = "transparent"
        }
        //点击的是img 而不是把header本身变颜色
        if (event.target.localName == "img") {  
          event.target.style.backgroundColor = "rgba(128,128,128,.5)"
        }
      } else {
        event.target.style.backgroundColor = "transparent"
        // alert("跟上次相同")
      }
    },


data里面  prevMenuClass: ""

highlight绑定在header上，利用冒泡

重点是利用 prevMenuClass判断两次点击的图标是否是同一个

————————————————————————

或者绑定class的值，通过改变数据控制样式（vue中更推荐）

 <img src="./img/probe.png"
  :class="{'operationIcon':true,'active':highlightIcon=='probe'? true:false}" //关键
  title="探针"
  @click="probe"/>

//data中
highlightIcon:null

//methos中
probe(){
 this.highlightIcon ="probe"
}
//如果不需要再将highlightIcon设置为null即可
//active是设置背景色的样式名