Element から学ぶ Vue.js の component の作り方 その3 (card)

Element-ui とは

第3回になり、今まではあまりにも説明不足だったと反省しました。
Elemnt-ui は Vue.js のコンポーネントライブラリです。
Vue.js で作成されているため、インポートすることで様々なコンポーネントを利用可能になるます。
CSS フレームワークとも捉えることができ、デザイン済みのコンポーネントを簡単に利用することが可能です。
CSSフレームワークなので、ある程度整形されたコンポーネントに変更を加えて、自身のプロダクト色に染めることも可能です。

今回は Elemnt 2.52 がベースになってます。
公式ページ
https://element.eleme.io/#/en-US\

今回は card コンポーネントを解析していきたいと思います。

ソースの構成は

　index.js
  src
   |- main.vue

となっていいます。

main.vue

main.vue

<template>
  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
    <div class="el-card__header" v-if="$slots.header || header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="el-card__body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ElCard',
    props: {
      header: {},
      bodyStyle: {},
      shadow: {
        type: String
      }
    }
  };
</script>

main.vue を見ると、難しいことはしてなさそうです。

  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">

上記では class を指定しています。

class="el-card" は固定で指定されます。
shadow は 指定されている場合は is-指定した値 が class になります。
指定されて表示が切り替わるのは always / hover / never のいずれかです。

:class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'

もし、shadow が指定されていない場合は is-always-shadow クラスが bind されます。

<div class="el-card__header" v-if="$slots.header || header">
  <slot name="header">{{ header }}</slot>
</div>

次の div は el-card__header が固定で指定されています。
$slots.header、または prop の header が指定されている場所は {{ header }} に指定された要素が入り表示されます。

<div class="el-card__body" :style="bodyStyle">
  <slot></slot>
</div>

次の div は el-card__body が固定で指定されています。 また、style 要素に prop で指定する bodyStyle が bind されています。
bodyStyle は CSS スタイルを渡すことができます。

例）{color: 'red', 'background-color': 'gray'}

<el-card :body-style="{color: 'red', 'background-color': 'gray'}">

このように body 部分のスタイルに適用されます。

<slot></slot> は <el-card></el-card> の中に記述したものがそのまま入ります。

今まででてきた要素を組み合わせてみました。

下記がソースになります。

<el-card class="box-card">
   <div slot="header"> <!-- ヘッダー -->
    <span>サンプルですよ</span> <!-- ヘッダーの内容1 -->
    <el-button style="float: right;">スロット=header に ボタン</el-button> <!-- ヘッダーの内容2 -->
  </div>
   <!-- ボディのスロット -->
  ここが スロット です。
  ボタンをおいてみた
  <div>
    <el-button type="danger"> スロットにボタン </el-button>
   </div>
  <div>
     テーブルをおいてみた
  　　<table border>
       <tr>
         <th>ID</th><th>NAME</th><th>AGE</th>
       </tr>
       <tr>
         <td>1</td><td>ぺけぺけ</td><td>55</td>
       </tr>
       <tr>
         <td>2</td><td>ぷけぷけ</td><td>48</td>
       </tr>
     </table>
  </div>
</el-card>