Vue中对前端按钮高亮的几种操作方式

在Vue中我们有时候会碰到一些需求，就是在点击某个按钮的时候，我们执行别的操作，但是我们希望点击别的操作的时候，让我们之前点击的按钮进行处于高亮状态。

个人在处理业务的时候，测试说，当用户选择某个按钮的时候，在执行别的操作，且别的操作执行完毕之后，返回的时候按钮不在高亮了，叫我处理一下。

在处理这个需求的时候，我使用过几种方式，分别在本篇进行讲解。

第一种，使用Vue的v-bind:class绑定样式类进行

<template>
  <button v-bind:class="buttonClasses">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false
    }
  },
  computed: {
    buttonClasses() {
      return {
        'highlight': this.isHighlighted
      }
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

这种方式，我们采用计算属性来绑定样式类，当我们的计算属性buttonClasses返回一个对象的时候，这个对象包含highlight样式类，当isHighlighted的值为ture的时候，这个对象将会被应用到按钮上，从而进行高亮显示。

element ui中使el-button组件的type属性来实现按钮的高亮效果

<template>
  <el-button type="primary" :class="{ 'is-active': isActive }" @click="toggleActive">点击我</el-button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

<style>
.is-active {
  background-color: yellow;
}
</style>

如上代码。我们可以通过ELement Ui的el-button组件，并通过type属性设置按钮的类型为primary ,然后我们使用:class绑定语法来动态绑定按钮的样式类，当isActive的值为ture的时候，按钮会应用is-active样式类，从而高亮显示。通过点击按钮，我们可以知道toggleActive方法来切换isActive的值，从而实现按钮的高亮和取消高亮的效果。

实现Element UI的按钮在状态值不发生更改时保持选择的默认样式

使用:class绑定语法结合条件判断来动态绑定按钮的样式类

<template>
  <el-button :class="{ 'is-active': isActive || isDefaultActive }" @click="toggleActive">点击我</el-button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isDefaultActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  },
  mounted() {
    // 在组件挂载后，将默认状态设置为选中
    this.isDefaultActive = true;
  }
}
</script>

<style>
.is-active {
  background-color: yellow;
}
</style>

我们使用:class绑定语法来动态绑定按钮的样式类。除了根据isActive的值来判断是否应用is-active样式类外，我们还添加了isDefaultActive作为默认状态的标志位。

在组件挂载后，我们将isDefaultActive设置为true，从而在初始状态下保持按钮的默认选择样式。当点击按钮时，isActive的值会发生改变，从而触发样式类的变化。

通过这种方式，即使状态值不发生更改，按钮也会保持默认选择样式，除非用户点击按钮改变了状态值。

修改按钮的边框

我的需求是将 将Element UI按钮的边框颜色设置为灰色，故而采用了CSS样式来覆盖默认的边框样式。

<template>
  <el-button :class="{ 'is-active': isActive || isDefaultActive }" @click="toggleActive">点击我</el-button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      isDefaultActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  },
  mounted() {
    // 在组件挂载后，将默认状态设置为选中
    this.isDefaultActive = true;
  }
}
</script>

<style>
.is-active {
  background-color: yellow;
  border-color: gray; /* 设置边框颜色为灰色 */
}
</style>