vue.js - VueJS-v-绑定(bind) :style + hover

Question

我需要将 CSS 悬停与 VueJS v-bind:style 指令一起使用，但找不到相关信息。

我需要为悬停绑定(bind)样式，但是 v-bind:style.hover={}不起作用。所有属性都将从后端获取，因此我需要动态绑定(bind)样式。

是否有其他方法可以使用 VueJS 在鼠标悬停或 CSS 悬停时绑定(bind)样式？

这是我的代码

这是对象:

button: {
    colorBackd: '#1e2021',
    colorBackdHover: '#000000',
    text: 'Results',
    color: '#d3e0ff',
    colorHover: "#ffffff",
    borderColor: '#d3e0ff',
    borderColorHover: "#ffffff"
},

这里是需要绑定(bind)样式的html元素

<button type="button"
    :style="{
    color:button.color,
        backgroundColor:button.colorBackd,
        borderColor:button.borderColor,
    }"
    class="btn btn-outline-info large-button">

        {{ button.text }}

</button>

谢谢

Answer 1

改进方案:使用CSS自定义属性和变量

如果您只打算使用现代/常青浏览器，那么使用 CSS 自定义属性和变量是最佳选择!您实际上可以将 CSS 自定义属性传递到 :style 绑定(bind)中，例如

computed: {
  styleObject: function() {
    return {
      '--color': this.button.color,
      '--color-hover': this.button.colorHover
    }
  }
}

在你的模板中:

<custom-button :style="styleObject" />

对于 CSS，这只是一个问题:

button {
  color: var(--color);
}

button:hover {
  color: var(--color-hover);
}

此方法的优点是您可以限定 CSS 自定义属性的范围，因此当您在元素级别定义 CSS 属性时(而不是在 :root).

唯一的缺点是您必须在悬停和非悬停状态下迭代声明所有变量，这可能有点麻烦。但是，与您从使用 CSS 变量中获得的好处相比，我认为这是一个非常小的缺点。

请参阅下面的概念验证:

var customButton = Vue.component('custom-button', {
  template: '#custom-button',
  data() {
    return {
      button: {
        colorBackd: '#1e2021',
        colorBackdHover: '#000000',
        text: 'Results',
        color: '#d3e0ff',
        colorHover: "#ffffff",
        borderColor: '#d3e0ff',
        borderColorHover: "#ffffff"
      }
    };
  },
  computed: {
    styleObject() {
      return {
        '--button-color': this.button.color,
        '--button-background-color': this.button.colorBackd,
        '--button-border-color': this.button.borderColor,
        
        '--button-color--hover': this.button.colorHover,
        '--button-background-color--hover': this.button.colorBackdHover,
        '--button-border-color': this.button.borderColorHover
      };
    },
  },
});

new Vue({
  el: '#app'
});

button {
  color: var(--button-color);
  background-color: var(--button-background-color);
  border-color: var(--button-border-color);
}

button:hover {
  color: var(--button-color--hover);
  background-color: var(--button-background-color--hover);
  border-color: var(--button-border-color--hover);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <custom-button></custom-button>
</div>

<script type="text/template" id="custom-button">
  <button type="button" :style="styleObject" class="btn btn-outline-info large-button">
        {{ button.text }}
  </button>
</script>

原始解决方案:使用基于JS的鼠标事件

您可以将元素的悬停状态存储在其data 中，例如hoverState。它默认设置为 false，当 @mouseenter 被触发时切换为 true，然后返回到 false 当 @mouseleave 被触发时:

然后，您可以简单地将一个计算属性绑定(bind)到style属性，例如styleObject。在此 styleObject 中，您可以根据组件数据中的 hoverState 返回正确的 CSS 样式:

var customButton = Vue.component('custom-button', {
  template: '#custom-button',
  data() {
    return {
      button: {
        colorBackd: '#1e2021',
        colorBackdHover: '#000000',
        text: 'Results',
        color: '#d3e0ff',
        colorHover: "#ffffff",
        borderColor: '#d3e0ff',
        borderColorHover: "#ffffff"
      },
      hoverState: false
    };
  },
  computed: {
    styleObject() {
      var modifier = '';
      if (this.hoverState)
        modifier = 'Hover';
        
      return {
        color: this.button['color' + modifier],
        backgroundColor: this.button['colorBackd' + modifier],
        borderColor: this.button['borderColor' + modifier]
      };
    },
  },
  methods: {
    updateHoverState(isHover) {
      this.hoverState = isHover;
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <custom-button></custom-button>
</div>

<script type="text/template" id="custom-button">
  <button type="button" :style="styleObject" @mouseenter="updateHoverState(true)" @mouseleave="updateHoverState(false)" class="btn btn-outline-info large-button">
        {{ button.text }}
  </button>
</script>