在 vue.js 组件中，如何在 css 中使用 props？

Question

我是 vue.js 的新手。这是我的问题：

在这样的 *.vue 文件中：

 <template>
  <div id="a">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color']
  }
</script>

<style scoped>
    #a {
      background-color: ?
    }
<style>

如何在 --- 中使用道具 color background-color: （现在 ? 在哪里）。

谢谢。

原文由 MingWen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你没有。您使用计算属性，然后使用道具返回 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>

原文由 Potray 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你真的可以！

您应该在计算属性中定义 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

原文由 Yuri M 发布，翻译遵循 CC BY-SA 4.0 许可协议