VueJS - v-bind:style + 悬停 [英] VueJS - v-bind:style + hover

问题描述

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

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

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

这是我的代码

这是对象:

按钮:{colorBackd: '#1e2021',colorBackdHover: '#000000',文本:'结果'，颜色:'#d3e0ff'，colorHover: "#ffffff",边框颜色:'#d3e0ff'，边框颜色悬停:#ffffff"},

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

{{ button.text }}

谢谢

解决方案

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

如果您只想使用现代/常绿浏览器，那么使用 CSS 自定义属性和变量是不二之选！您实际上可以将 CSS 自定义属性传递到 :style 绑定中，例如

计算:{样式对象:函数(){返回 {'--color': this.button.color,'--color-hover': this.button.colorHover}}}

在您的模板中:

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

按钮 {颜色:var(--color);}按钮:悬停{颜色:var(--color-hover);}

这种方法的优点是你可以定义 CSS 自定义属性的范围，所以当你在元素级别定义 CSS 属性时(而不是在 :root).

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

请参阅下面的概念验证:

var customButton = Vue.component('custom-button', {模板:'#custom-button',数据() {返回 {按钮: {colorBackd: '#1e2021',colorBackdHover: '#000000',文本:'结果'，颜色:'#d3e0ff'，colorHover: "#ffffff",边框颜色:'#d3e0ff'，边框颜色悬停:#ffffff"}};},计算:{样式对象(){返回 {'--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};},},});新的 Vue({el: '#app'});

button {颜色:var(--button-color);背景色:var(--button-background-color);边框颜色:var(--button-border-color);}按钮:悬停{颜色:var(--button-color--hover);背景色:var(--button-background-color--hover);边框颜色:var(--button-border-color--hover);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script><div id="应用程序"><自定义按钮></自定义按钮>

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

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

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

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

var customButton = Vue.component('custom-button', {模板:'#custom-button',数据() {返回 {按钮: {colorBackd: '#1e2021',colorBackdHover: '#000000',文本:'结果'，颜色:'#d3e0ff'，colorHover: "#ffffff",边框颜色:'#d3e0ff'，边框颜色悬停:#ffffff"},悬停状态:假};},计算:{样式对象(){var 修饰符 = '';如果(this.hoverState)修饰符 = '悬停';返回 {颜色:this.button['color' + 修饰符]，backgroundColor: this.button['colorBackd' + 修饰符],borderColor: this.button['borderColor' + 修饰符]};},},方法: {更新悬停状态(isHover){this.hoverState = isHover;}}});新的 Vue({el: '#app'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script><div id="应用程序"><自定义按钮></自定义按钮>

<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 }}</script>

I need to use CSS hover with VueJS v-bind:style directive but couldn't find information regarding it.

I need to bind styles for hover but v-bind:style.hover={} doesn't work. All the properties are going to be fetched from back-end, so I need to bind styles dynamically.

Are there other ways to bind styles on mouse over or CSS hover using VueJS?

Here is my code

This is the object :

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

Here is the html element that needs to be bound with styles

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

        {{ button.text }}

</button>

Thanks

解决方案

Improved solution: use CSS custom properties and variables

If you only intend to work with modern/evergreen browsers, then using CSS custom properties and variables is the way to go! You can actually pass CSS custom properties into the :style binding, e.g.

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

And in your template:

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

For the CSS, it's just a matter of:

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

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

The advantage of this method is that you can scope CSS custom properties, so these variables will only apply to your specific button component when you define the CSS properties at the element level (instead of in :root).

The only drawback is that you have to iteratively declare all the variables in both hover and unhovered states, which can be a little bit cumbersome. However, I see this is a very minor disadvantage, compared to the benefits that you reap from using CSS variables.

See proof-of-concept below:

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>

Original sotluion: use JS-based mouse events

You can store the hovered state of the element in its data, say hoverState. It is set to false by default, and is toggled to true when @mouseenter is fired, and back to false when @mouseleave is triggered:

Then, you can simply bind a computed property to the style attribute, for example, styleObject. In this styleObject, you can return the correct CSS styles depending on the hoverState found in the component's data:

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>

这篇关于VueJS - v-bind:style + 悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！