VueJS - v-bind：样式悬停

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>

谢谢

原文由 dav88dev 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性（而不是在 :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 。 It is set to false by default, and is toggled to true when @mouseenter is fired, and back to false when @mouseleave 被触发：

然后，您可以简单地将 计算属性 绑定到 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>

原文由 Terry 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 选择器中描述默认变量值。

原文由 VitalickS 发布，翻译遵循 CC BY-SA 4.0 许可协议