在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>

Source

现在是 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 更新传递的值(例如,当您应用悬停事件时)。

credit

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