web-dev-qa-db-ja.com

vue.jsコンポーネントで、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を使用するにはどうすればよいですか（現在は?です）。

ありがとう。

cssvue.jsvuejs2vue-component
21
MingWen

あなたはしません。計算プロパティを使用し、そこでpropを使用して、次のように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>
25
Potray

実際にできます！

Computed PropertyでCSS変数を定義し、CSS変数を必要とする要素のスタイル属性としてComputedプロパティを呼び出してください。最後に、ドキュメントの下部にあるタグ内で変数を使用できます。

こちらをご覧ください： https://codepen.io/richardtallent/pen/yvpERW/

some code to make the link work.

そしてここ： https://github.com/vuejs/vue/issues/7346

10
Yuri M

疑似クラスやメディアクエリなどのスタイル属性で適用できないCSSが必要な場合、私は次のことを行います。

Vueを初期化するときにグローバルに利用可能なスタイルコンポーネントを作成します（そうしないと、リンティングの問題が発生する場合に必要です）。スロット内のコンテンツを単純にレンダリングするスタイルタグを作成します。

スタイル属性に適用できない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を追加したり、アプリケーションのパフォーマンスを遅くする可能性のあるイベントのサイズを変更するよりも、場合によってはこのようにしたいです。

6
gwildu