在 vue.js 组件中，如何在 css 中使用 props？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42872002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In vue.js component, how to use props in css?
提问by MingWen
I'm new to vue.js. Here is my problem:
我是 vue.js 的新手。这是我的问题：
In a *.vue file like this:
在这样的 *.vue 文件中：
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
How can I use the props colorin background-color:(where is a ?now).
我如何使用道具（现在color在background-color:哪里?）。
Thanks.
谢谢。
采纳答案by Potray
You don't. You use a computed property and there you use the prop to return the style of the div, like this:
你没有。您使用计算属性，然后使用道具返回 div 的样式，如下所示：
<template>
<div id="a" :style="style" @mouseover="mouseOver()">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color'],
computed: {
style () {
return 'background-color: ' + this.hovering ? this.color: 'red';
}
},
data () {
return {
hovering: false
}
},
methods: {
mouseOver () {
this.hovering = !this.hovering
}
}
}
</script>
<style scoped>
<style>
回答by Yuri M
You actually can!
你真的可以！
You should define the CSS variables in a Computed Property, then call the computed property as a style attribute to the element that will require the CSS variable, and finally you may use the variable within the tags at the bottom of your document.
您应该在计算属性中定义 CSS 变量，然后将计算属性作为样式属性调用到需要 CSS 变量的元素，最后您可以在文档底部的标签中使用该变量。
new Vue({
el: '#app',
data: function() {
return {
baseFontSize: 1,
bgHoverColor: "#00cc00",
hoverContent: "Hovering!"
}
},
computed: {
cssProps() {
return {
'--hover-font-size': (this.baseFontSize * 2) + "em",
'--bg-hover-color': this.bgHoverColor,
'--hover-content': JSON.stringify(this.hoverContent)
}
}
}
})div {
margin: 1em;
}
div.test:hover {
background-color: var(--bg-hover-color);
font-size: var(--hover-font-size);
}
div.test:hover::after {
margin-left: 1em;
content: var(--hover-content);
}<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app" :style="cssProps">
<div>Hover text: <input type="text" v-model="hoverContent"></div>
<div>Hover color: <input type="color" v-model="bgHoverColor"></div>
<div class="test">Hover over me</div>
</div>Or have a look here: https://codepen.io/richardtallent/pen/yvpERW/
And here: https://github.com/vuejs/vue/issues/7346
或者看看这里：https: //codepen.io/richardtallent/pen/yvpERW/
这里：https: //github.com/vuejs/vue/issues/7346
回答by gwildu
If you need css that can't be applied by a style attribute like pseudo classes or media queries, what I do is the following:
如果您需要无法通过诸如伪类或媒体查询之类的样式属性应用的 css，我会执行以下操作：
Create a globally available style component when initializing Vue (you need it as otherwise you run into linting issues). It creates a style tag that simply renders the content in the slot:
在初始化 Vue 时创建一个全局可用的样式组件（你需要它，否则你会遇到 linting 问题）。它创建了一个样式标签，用于简单地呈现插槽中的内容：
I would only use this if you really need both dynamic values in your css and css features that can't be applied to a style attribute.
如果您确实需要 css 中的动态值和无法应用于样式属性的 css 功能，我只会使用它。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.component('v-style', {
render: function(createElement) {
return createElement('style', this.$slots.default)
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Then use it at the top of your template like this and you get the full JavaScript scope of your component and the full css syntax combined:
然后像这样在模板顶部使用它，您将获得组件的完整 JavaScript 范围和完整的 css 语法组合：
<template>
<v-style>
@media screen and (max-width: 820px) {
.gwi-text-media-{{ this.id }} {
background-image: url({{ mobileThumb }});
}
}
</v-style>
</template>
It seems a bit hacky to me, but it does it's job and I would rather go like this in some cases than having to add additional JS for mouse-over or resize events that have a big potential to slow down your application performance.
这对我来说似乎有点 hacky，但它确实有效，在某些情况下，我宁愿这样做，也不愿为鼠标悬停或调整大小事件添加额外的 JS，这些事件可能会降低您的应用程序性能。
回答by phen0menon
Why not just use :styleprop in this way:
为什么不:style以这种方式使用prop：
<template>
<div :style="{ backgroundColor: color }">
</template>
<script>
export default {
props: {
color: {
type: String,
default: ''
}
}
}
</script>
Make sure you define css properties in camelCase style.
确保以驼峰式风格定义 css 属性。
回答by Emad Ahmed
as 2020, i suggest using this trick with css function var
到 2020 年，我建议将此技巧与 css 功能一起使用 var
<template>
<div id="a" :style="cssVars"></div>
</template>
<script>
export default {
props: ['color'],
computed: {
cssVars () {
return{
/* variables you want to pass to css */
'--color': this.color,
}
}
}
<script>
<style scoped>
a{
background-color: var(--color);
}
</style>
this method is very useful becuase it allow you to update the passed values through css later on (for example when you apply hover event).
此方法非常有用，因为它允许您稍后通过 css 更新传递的值（例如，当您应用悬停事件时）。
回答by Crimbo
You could utilise the CSS var(--foo-bar)function. It is also useful if you are trying to pass an asset that has its own dynamic path, like Shopify does.
您可以利用 CSSvar(--foo-bar)功能。如果您尝试传递具有自己动态路径的资产（如 Shopify），它也很有用。
This method also works for styling the :beforeand :afterelements as they refer back to the style applied on the owner element.
此方法也适用于:before和:after元素的样式，因为它们引用回应用于所有者元素的样式。
Using the original post example for passing a colour:
使用原始帖子示例传递颜色：
<template>
<div
id="a"
:style="{ '--colour': color }">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: var(--colour);
}
<style>
Using the original post example for passing an URL:
使用原始帖子示例传递 URL：
<template>
<div
id="a"
:style="{ '--image-url': 'url(' + image + ')' }">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['image']
}
</script>
<style scoped>
#a {
background-url: var(--image-url);
}
<style>
