在vue.js组件中,如何使用css中的props?
In vue.js component, how to use props in css?
我是 vue.js 的新手。这是我的问题:
在这样的 *.vue 文件中:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
如何在background-color:
中使用道具color
(现在是?
)。
谢谢。
你不知道。您使用计算 属性 并在那里使用道具 return 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>
你真的可以!
您应该在 Computed 属性 中定义 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>
或在这里查看:https://codepen.io/richardtallent/pen/yvpERW/
在这里:https://github.com/vuejs/vue/issues/7346
如果您需要 css 无法通过伪 类 或媒体查询等样式属性应用,我将执行以下操作:
在初始化 Vue 时创建一个全局可用的样式组件(你需要它,否则你 运行 会陷入 linting 问题)。它创建了一个简单地呈现插槽中内容的样式标签:
只有当您确实需要 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')
然后像这样在模板顶部使用它,您将获得组件的完整 JavaScript 范围和完整的 css 语法组合:
<template>
<v-style>
@media screen and (max-width: 820px) {
.gwi-text-media-{{ this.id }} {
background-image: url({{ mobileThumb }});
}
}
</v-style>
</template>
这对我来说似乎有点老套,但它确实有效,在某些情况下我宁愿这样做,也不愿为鼠标悬停或调整大小事件添加额外的 JS,这些事件很可能会减慢您的速度应用性能。
为什么不以这种方式使用 :style
道具:
<template>
<div :style="{ backgroundColor: color }">
</template>
<script>
export default {
props: {
color: {
type: String,
default: ''
}
}
}
</script>
确保您以驼峰命名法定义 css 属性。
您可以使用 CSS var(--foo-bar)
函数。如果您尝试传递具有自己的动态路径的资产(如 Shopify),它也很有用。
此方法也适用于设置 :before
和 :after
元素的样式,因为它们引用了应用于所有者元素的样式。
使用原始 post 示例传递颜色:
<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>
使用原始 post 示例传递 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>
现在是 2020 年,我建议将此技巧与名为 var
的 css 函数一起使用
<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>
此方法非常有用,因为它允许您稍后通过 css 更新传递的值(例如,当您应用悬停事件时)。
Vue 3 添加了绑定样式的新方法,因此现在您可以轻松地将道具绑定到 css 属性。
阅读来源:
https://learnvue.co/2021/05/how-to-use-vue-css-variables-reactive-styles-rfc/
<template>
<div>
<div class="text">hello</div>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
我知道我们在这里谈论的是 vue 2,但是如果 vue 3 的任何人遇到这个问题(就像我一样),vue 3 引入了一种更简洁的方法来做到这一点:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: v-bind(color);
}
<style>
Vue 在幕后实际做的是相同的 “通过组件的样式过程引入 css 变量”,但现在看起来确实好多了。
文档来源:https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css
我是 vue.js 的新手。这是我的问题:
在这样的 *.vue 文件中:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: ?
}
<style>
如何在background-color:
中使用道具color
(现在是?
)。
谢谢。
你不知道。您使用计算 属性 并在那里使用道具 return 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>
你真的可以!
您应该在 Computed 属性 中定义 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>
或在这里查看:https://codepen.io/richardtallent/pen/yvpERW/
在这里:https://github.com/vuejs/vue/issues/7346
如果您需要 css 无法通过伪 类 或媒体查询等样式属性应用,我将执行以下操作:
在初始化 Vue 时创建一个全局可用的样式组件(你需要它,否则你 运行 会陷入 linting 问题)。它创建了一个简单地呈现插槽中内容的样式标签:
只有当您确实需要 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')
然后像这样在模板顶部使用它,您将获得组件的完整 JavaScript 范围和完整的 css 语法组合:
<template>
<v-style>
@media screen and (max-width: 820px) {
.gwi-text-media-{{ this.id }} {
background-image: url({{ mobileThumb }});
}
}
</v-style>
</template>
这对我来说似乎有点老套,但它确实有效,在某些情况下我宁愿这样做,也不愿为鼠标悬停或调整大小事件添加额外的 JS,这些事件很可能会减慢您的速度应用性能。
为什么不以这种方式使用 :style
道具:
<template>
<div :style="{ backgroundColor: color }">
</template>
<script>
export default {
props: {
color: {
type: String,
default: ''
}
}
}
</script>
确保您以驼峰命名法定义 css 属性。
您可以使用 CSS var(--foo-bar)
函数。如果您尝试传递具有自己的动态路径的资产(如 Shopify),它也很有用。
此方法也适用于设置 :before
和 :after
元素的样式,因为它们引用了应用于所有者元素的样式。
使用原始 post 示例传递颜色:
<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>
使用原始 post 示例传递 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>
现在是 2020 年,我建议将此技巧与名为 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>
此方法非常有用,因为它允许您稍后通过 css 更新传递的值(例如,当您应用悬停事件时)。
Vue 3 添加了绑定样式的新方法,因此现在您可以轻松地将道具绑定到 css 属性。
阅读来源: https://learnvue.co/2021/05/how-to-use-vue-css-variables-reactive-styles-rfc/
<template>
<div>
<div class="text">hello</div>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
我知道我们在这里谈论的是 vue 2,但是如果 vue 3 的任何人遇到这个问题(就像我一样),vue 3 引入了一种更简洁的方法来做到这一点:
<template>
<div id="a">
</div>
</template>
<script>
export default {
name: 'SquareButton',
props: ['color']
}
</script>
<style scoped>
#a {
background-color: v-bind(color);
}
<style>
Vue 在幕后实际做的是相同的 “通过组件的样式过程引入 css 变量”,但现在看起来确实好多了。
文档来源:https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css