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>

你可能感兴趣的:(#,Vue学习,vue.js,前端,javascript)