VueJS - v-bind:style + hover

Question

我需要使用CSS悬停与VueJS v-bind:style指令但无法找到有关它的信息.

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

有没有其他方法可以使用VueJS在鼠标悬停或CSS悬停上绑定样式？

这是我的代码

这是对象:

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

这是需要与样式绑定的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绑定中，例如

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属性时（而不是in中:root），这些变量将仅应用于您的特定按钮组件。

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

请参阅下面的概念验证：

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

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

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

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

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

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

然后，您可以简单地将计算的属性绑定到style属性，例如styleObject。在此styleObject，您可以返回正确的CSS样式，具体取决于在hoverState组件数据中找到的样式：

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);
}

Answer 2

其他方式（使用CSS变量）。

您需要使用样式创建HTML

<style>
     div[vueid=${_uid}] { --btn-hover: ${`Here your hover brush`} }
</style>

并将其注入您的组件。

<template>
   <div vueid="_uid">
      <button></button>
      <div v-html="styleCode"></div>
   </div>
</template>

然后，只需在静态css文件中使用此变量即可设置按钮样式。

button:hover { background: var(--btn-hover); }

注意：您可以在:root选择器中描述默认变量值。