Vue中实现按钮点击后保留CSS:active样式的方法

问题说明 #

目前按钮仅在按住时显示目标样式，松开点击后效果立即消失。已知原生JS可通过addEventListener直接修改元素样式或用classList.add()添加类，但使用Vue框架，希望通过@click="activeChoice"的方式实现点击后保持样式的需求。

当前CSS代码 #

.button-text:active {
  color: white;
  background-color: #255390;
  border-radius: 3.125rem;
}

.choice:active {
  color: white;
  background-color: #255390;
}

效果对比 #

• 目标效果：
• 当前效果：

解决方案 #

1. 单按钮切换样式 #

如果是单个按钮，点击后切换激活状态：

• 在Vue组件的data中定义激活状态变量：

data() {
  return {
    isActive: false
  }
}

• 修改模板，用:class（v-bind:class的简写）绑定类，同时绑定点击事件：

<button 
  class="button-text"
  :class="{ 'active': isActive }"
  @click="isActive = !isActive"
>
  按钮文本
</button>

• 更新CSS，新增.active类替代:active伪类：

.button-text.active {
  color: white;
  background-color: #255390;
  border-radius: 3.125rem;
}

2. 多按钮单选（仅一个激活） #

如果是多个按钮，点击其中一个后激活，其他恢复默认：

• 在data中定义当前激活的按钮标识：

data() {
  return {
    activeBtn: '' // 可用id、索引或文本作为标识
  }
}

• 模板中绑定按钮：

<button 
  class="choice"
  :class="{ 'active': activeBtn === 'btn1' }"
  @click="activeBtn = 'btn1'"
>
  选项1
</button>
<button 
  class="choice"
  :class="{ 'active': activeBtn === 'btn2' }"
  @click="activeBtn = 'btn2'"
>
  选项2
</button>

• 更新CSS：

.choice.active {
  color: white;
  background-color: #255390;
}

3. 通过activeChoice方法处理 #

如果需要统一用方法管理逻辑，可把逻辑写到methods中：

methods: {
  activeChoice(btnId) {
    // 单按钮切换逻辑
    // this.isActive = !this.isActive;
    
    // 多按钮单选逻辑
    this.activeBtn = btnId;
  }
}

模板调用：

<button 
  class="choice"
  :class="{ 'active': activeBtn === 'btn1' }"
  @click="activeChoice('btn1')"
>
  选项1
</button>

内容的提问来源于stack exchange，提问作者Matthew