Help us understand the problem. What is going on with this article?

Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる

More than 1 year has passed since last update.

ブロック要素に内容を表示するだけの簡単なコンポーネントを作ったとします。
この要素幅や背景色を属性で指定したい場合、CSS変数を使うと以下のように実装できます。

Box.vue
<template>
  <div class="box" :style="styles"> <!-- computedなstylesプロパティをstyleにバインド-->
    <div class="message">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'box',
  props: {
    color: {},
    width: {}
  },
  computed: {
    // バインドするスタイルを生成
    styles () {
      return {
        '--color': this.color,
        '--width': this.width
      }
    }
  }
}
</script>

<style scoped>

.box {
  /* デフォルトの値を宣言*/
  --color: orange;
  /* --width: width; */ /* 20180215 書き間違えていたため修正しました */
  --width: 100px;

  /* CSS変数を背景と幅に割り当て */
  background-color: var(--color);
  width: var(--width);

  display: inline-block;

}

.box .message {
  padding: 1em;
}
</style>

使うときはこんな感じになります。

App.vue
<template>
  <div id="app">
    <!-- 属性で色と幅をバインド -->
    <box class="green" :color="color" :width='width'>.green</box>

    <div>
      <!-- バインドした属性を編集する入力ボックス -->
      <input v-model='color'>
      <input v-model='width'>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    // バインドする属性を宣言
    return {
      color: 'pink',
      width: '20px'
    }
  }
}
</script>

実行した様子は以下の感じです(画像なのでわかりにくいですが)。
入力ボックスに入力した値に応じてコンポーネントが変化します。

image.png

shinobu_shiva
シタテル株式会社でCTOをしています
https://sitateru.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away