JavaScript
vue.js

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 コンポーネントを解析していきたいと思います。

image.png

ソースの構成は

 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 のいずれかです。

image.png

: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 部分のスタイルに適用されます。

image.png

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

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

image.png

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

<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>