プログラミング

Vue.jsでコンポーネントの値をCSSに渡す方法

VueからCSSに値を渡す

Vue.jsを使っていて、「propsの値をCSSに渡すにはどうすればいいんだろう...?」という感じで少し悩んだので、コンポーネントの値をCSSに渡す方法を、自身の備忘録目的も含めて解説します。

ちなみに、やり方を簡潔にまとめると、

  • computed内にCSSカスタムプロパティ(以下CSS変数)を定義する
  • 定義したCSS変数に、CSS側に渡したいVueコンポーネントの値を指定する
  • styleにバインドする

この3つが、大まかな実装方法です。

CSSにVueコンポーネントの値が渡せることで何が嬉しいのかというと、いちいち固定のCSSを書き加えなくても、呼び出し元で指定した値がそのままCSSに反映されるようになるんです。

ユウマ
コンポーネント化が捗りますよ...!

それでは、さっそく解説していきます!

Vue.jsでコンポーネントの値をCSSに渡す方法

以下が実際のコードです。

【呼び出し元】


<template>
  <div id="app">
    <!-- 使う値をコンポーネント側に渡す -->
    <BaseText
      :size="40"
    >Hello World!!</BaseText>
  </div>
</template>

<script>
import BaseText from './components/BaseText.vue';

export default {
  name: 'App',
  components: {
    BaseText
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

【コンポーネント】


<template>
  <!-- 「v-bind:style」でcomputedのプロパティをバインド -->
  <!-- class属性に作ったクラス名を指定する -->
  <div
    class="text"
    :style="fontSize"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'BaseText',
  props: {
    size: {
      type: Number,
      required: false,
      default: 18,
    }
  },
  computed: {
    // CSS変数を定義して、CSS側に渡したいVueコンポーネントの値を指定する
    // ※今回はpropsで受け取った値
    fontSize() {
      return {
        '--font-size' : this.size,
      }
    },
  }
}
</script>

<style scoped>
  /* computedで定義したCSS変数を使って、CSSの値を指定する */
  .text {
    font-size: calc(100vw / 1080 * var(--font-size));
  }
</style>

上記のコードでは、親画面(呼び出し元)で「font-size」の値を渡してあげると、vw値に変換して画面サイズに応じて文字が縮小・拡大するといった処理をしています。

ユウマ
流れをもう少し詳し見ていきましょう!

「:size」の部分でfont-sizeで使用する値をコンポーネントに渡しています。


<BaseText 
  :size="40" 
>Hello World!!</BaseText>

コンポーネント側では、親画面から送られてきた値をpropsで受け取り、その値をcomputed内でCSS変数に保存します。

※CSS変数の宣言は、ハイフン2つで始まるので注意。(このコードのCSS変数は「--font-size」)


props: {
  size: {
    type: Number,
    required: false,
    default: 18,
  }
},
computed: {
  fontSize() {
    return {
      '--font-size' : this.size,
    }
  },
}
ユウマ
ちなみにdefault値の「18」は、呼び出し元から値が送られなかった時に使用される値です。

CSS側(styleタグ内)で、定義したCSS変数を使ってfont-sizeの値をvw値に変換しています。

CSS変数を使う時は、var()関数の中で変数名を指定する必要があるので注意。 (このコードでは「var(--font-size)」)


<style scoped>
  .text {
    font-size: calc(100vw / 1080 * var(--font-size));
  }
</style>

v-bind:styleにはcomputedのプロパティを、class属性にはクラス名を付与します。


<div
  class="text"
  :style="fontSize"
>
  <slot></slot>
</div>

動作画面はこちら

HelloWorld!!

最後に

今回は、Vue.jsでコンポーネントの値をCSSに渡す方法を解説しました。

今回解説したfont-size以外にも、String型で受け取ればどんなスタイルでも適用することができるので、色々試してみてください!

-プログラミング

Copyright© ユウマのブログ , 2020 All Rights Reserved.