如何使用功能更改Vue组件按钮的颜色？

Question

如何使用功能更改Vue组件按钮的颜色？正在使用Bootstrap-vue。在下面的代码中，使用功能更改了工具提示，如何将相同的想法应用于按钮？任何帮助将不胜感激。

这里是Vue组件：

<template>
  <div class="text-center">
    <b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary" @click="userHandler(username)">
      <div v-bind:class="{ active: checkbox1 }">
        {{ username }}
      </div>
    </b-button>  
  </div>
</template>

<script>

import EventBus from '../eventBus.js'
export default {

    props: ['username', 'checkbox1'],

    data() {
      return {
         show: true,
         tooltipTextContent: 'block',
     }      
},

methods: {


    userHandler(username) {

        EventBus.$emit('handleUser', username);  
    },


     tooltipText() {
          if (!this.checkbox1) {
            return this.tooltipTextContent
          } else {
            return `un${this.tooltipTextContent}`
          }
    }
},
} 

</script>
<style scoped>

.active {
    color: red;
}
</style>

Answer 1

使用对象语法

如果您想基于checkbox1属性更改按钮的颜色，则可以执行以下操作：

<b-button 
   v-b-tooltip.hover.right="tooltipText" 
   :variant="{ 'outline-primary': checkbox1, 'outline-secondary': !checkbox1 }" 
   @click="userHandler(username)">

如果outline-primary为checkbox1，则将按钮颜色设置为true，否则将其设置为outline-secondary颜色。您可以根据需要更改颜色和逻辑。

此外，请注意，这里:variant只是v-bind:variant的快捷方式。

使用计算属性

我们还可以绑定到返回对象的计算属性。这是一种常见而强大的模式：

<b-button 
   v-b-tooltip.hover.right="tooltipText" 
   :variant="getVariant" 
   @click="userHandler(username)">

然后创建一个名为getVariant的计算属性，例如：

computed: {
  getVariant: function () {
    return {
      'outline-primary': checkbox1,
      'outline-secondary': !checkbox1
    }
  }
}