改进的解决方案:使用CSS自定义属性和变量
如果你只想使用modern/evergreen浏览器，那么使用CSS自定义属性和变量就是最好的 Select ！实际上，您可以将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属性时，这些变量将仅应用于特定的按钮组件.
唯一的缺点是，您必须在悬停和未悬停状态下迭代声明所有变量，这可能有点麻烦.然而，与使用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>
原始sotluion:使用基于JS的鼠标事件
可以将元素的悬停状态存储在其data(例如hoverState)中.默认设置为false，当@mouseenter触发时切换为true，当@mouseleave触发时切换回false:
然后，您可以简单地将computed property绑定到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>