VueJS - v-bind：style + hover

时间：2017-10-03 19:23:58

标签： vue.js vuejs2

我需要将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>

谢谢

7 个答案:

答案 0 :(得分：5)

改进的解决方案：使用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自定义属性，因此当您在元素级别（而不是:root）中定义CSS属性时，这些变量将仅应用于您的特定按钮组件。 / p>

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

见下面的概念验证：

＆＃13;
＆＃13; 
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'
});
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

原始sotluion：使用基于JS的鼠标事件

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

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

＆＃13;
＆＃13; 
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'
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：5)

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

您需要使用样式

创建HTML 
  $(document).ready(function(){
    $("#buttonId").click(function(){
      // Code goes here
  });
});

并将其注入您的组件。 

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

答案 2 :(得分：2)

您可以为您的Vuejs组件分配一个ID，并在样式表中应用所需的悬停样式。

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

    {{ button.text }}
</button>

然后在标记中

<style>
styledButton:hover {
color: #FFFFFF
};
</style>

如果您希望悬停样式包含任何动态数据。制作一个调用计算属性的标签。

<style>{{computedStyle}}</style>

答案 3 :(得分：0)

如果使用单个文件组件，则只需将按钮样式设置为范围：

<template>
    <button></button>
</template>

<style scoped>
    button {
        /* your button style here */
    }
</style>

甚至对于更紧凑的样式，还有一些模块，如下所示：How to correctly use "scoped" styles in VueJS single file components?

答案 4 :(得分：0)

看到在vue中未实现此功能后，我决定使用叠加层，这将对叠加层使用：style相加，将通过更改不透明度来显示。

基本上是：

<div id="test" :style="style">
  <div class="overlay" :style="style.hover"></div>
</div>


var testArea = Vue.component('test-area', {
  template: '<div id="test" :style="style"><div class="overlay" :style="style.hover"></div></div>',
  computed: {
    style() {
      return {
        backgroundColor: '#0f0',
        hover: {
          backgroundColor: '#f00'
        }
      };
    },
  }
});

new Vue({
  el: '#app'
});
#test {
  position: relative;
  width: 100px;
  height: 100px;
}

#test>.overlay {
  opacity: 0;
}

#test:hover>.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <test-area></test-area>
</div>

答案 5 :(得分：0)

我想更改悬停时的z-index，以便将悬停的p标签显示在顶部。为此，我必须听事件以及一些值。

enter image description here enter image description here enter image description here 

<template>
...
<p @mouseover="changeZIndex"
   @mouseleave="changeZIndexToOriginal({$event,old_z_index})
>
...
</template>


<script>
...methods
changeZIndex(e){
    //change to new z-index
    e.target.style.zIndex = 5 //to show on top
}
changeZIndexToOriginal(e){
    //e.$event is  an event which is trirgered. to get event along with some value we have to use this approach
    // e.old_z_index is z-index that I want to set back again. I am just using loop index to set z-index
    e.$event.target.style.zIndex = e.old_z_index
}
...
</script>

使用上述方法，我们可以更改与目标元素相关的任何内容。

答案 6 :(得分：0)

我发现的一个非常简单的解决方案是改用 v-bind:class 指令：

在我的例子中，当这个元素处于非活动状态时，我需要添加一个悬停：

:class="{'inactive': !item.count}"

在这种情况下，我可以向我的类添加一个非活动属性，然后我可以简单地使用 hover 属性设置该类的样式，如下所示：

.inactive {
  color: black;

  &:hover {
    background-color: green;   
  }
}
相关问题
最新问题