html – 突出显示所选组件VueJS

2023年4月27日 298次阅读

我在Vue文件中工作,我想要的是突出显示活动元素,实现它的最佳方法是什么？

码

< li @click =“selectedComponent =’appBugs1’”>< i class =“ion-bug”>< / i> Test 1< / li>

< li @click =“selectedComponent =’appBugs2’”>< i class =“ion-bug”>< / i> Test 2< / li>

< li @click =“selectedComponent =’appBugs3’”>< i class =“ion-bug”>< / i> Test 3< / li>

因此,假设选择了第一个“li”元素 – >它应该为“li”提供红色背景,如果选择了另一个,则必须重置第一个并将红色背景指定给新选择的元素.

我试图在网上搜索,但没有太多关于它,如果你只有2个选项会很容易,但我的列表要大得多.那么解决这个问题的最佳方法是什么？

最佳答案 你可以这样做.

<li @click = "selectComponent('appBugs1', $event)"><i class="ion-bug"></i>Test 1</li>

<li @click = "selectComponent('appBugs2', $event)"><i class="ion-bug"></i>Test 2</li>

<li @click = "selectComponent('appBugs3', $event)"><i class="ion-bug"></i>Test 3</li>

添加以下方法：

selectComponent: function(component, event){
  if(this.activeLink){
      this.activeLink.classList.remove('highlight');
  }
  this.activeLink = event.target;
  this.activeLink.classList.add('highlight');

  this.selectedComponent = component;

};

和属性activeLink.然后添加你的CSS样式,例如：

.highlight{
    background-color: yellow;
}
点赞