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

alert

前提

Elemnt 2.52
公式ページ
https://element.eleme.io/#/en-US

アラート

用意されている機能

• アラートメッセージの表示
• 中央寄せ
• タイプ毎に用意されたアイコンの表示
• 説明分の表示
• アラートをクローズする / クローズさせない
• クローズボタンのカスタマイズ

構成

 |-index.js
 |-src
   |-main.vue

index.js は install が定義されている。※ 何がどんな風に処理されているかは現時点で不明。
main.vue を上から見ていく。

<transition>

Vue.js 提供のコンポーネント。
アニメーションなどを追加する事が可能らしい。
CSS がどこかにあるのだろうが、今はどこにあるかわからないので発見次第追記する。

<div>

1. v-show で表示を制御している。後述する close event で v-show が false になったら非表示となる。
2. class が bind されている。
   指定された type によって、class が決まる。色も class で決まってるはずなので、どこかで CSS で定義されてると思う。
3. 中央寄せにするか、center で制御されている。

<i>

1. アイコンの表示を制御している。 説明分がある場合はアイコンの大きくする class が設定される。

<div>
  <span>
   <slot>

title を表示する。説明分がある場合は title を太字にする class が設定される。

<slot>
  <p>

説明分を表示する。

<i>

1. 閉じるボタンを制御する。
2. close-text が設定されていない場合は [x] がデフォルトで表示される。設定されている場合は指定された値が close ボタンとなる
3. closable で close ボタンを表示するか制御している。表示しない場合は close できない
4. @click close イベントを実行する。close 時にしたい処理があれば、親で close イベントを設定する。

不明点 ※ わかり次第更新予定

1. role="alert"
2. $slots.title, $slots.default
3. CSS

所感

第一回目なので Qiita の書き方含め、わからない事が多い。
今後の更新で改善していこう。