v-tooltip, v-slot, v-btn, v-iconについて

完全なる個人用メモ。下記ソースコードの内容を紐解いてみる。

紐解きたいソースコード

<template>
  <v-tooltip open-delay="350" top>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on"
        small
        tile
        text
        :disabled="disabled"
        :color="command.color"
        @click="$emit('click', $event)">
        <v-icon>{{ command.icon }}</v-icon>
      </v-btn>
    </template>
    <span>{{ command.text }}</span>
  </v-tooltip>
</template>

templateタグとは

<template>

</template>

vueは作成したテンプレートをパーツ（コンポーネントと呼ぶ）として埋め込むことができる。コンポーネントを別ファイルで作成する場合、templateタグで囲む。

## v-tooltipとは？

  <v-tooltip open-delay="350" top>

v-tooltipは、vuetify(ビューティファイ)の一つ。
v-がつくのはvuetify関連。

tooltipはHTMLのtitleタグの機能で、hoverしたときにテキストを表示する。

・open-delay=" "
ツールチップを表示する時間を設定できる。単位はミリ秒。

・top
上側に表示する。

v-tooltipで囲んだ要素にマウスがのったら、3.5秒後に指定したツールチップを上側に表示する。

v-tooltip
API

## v-slot:activatorとは？

<template v-slot:activator="{ on }">

名前付きスロットを表している。

スロットとは、子のコンポーネントから親のコンポーネントにテンプレートの一部を差し込む機能のこと。

ここではactivator="{ on }"でその要素がクリックされると、親のテンプレートの内容を表示する。

なので単体では機能せず、 v-on="on" をつけたコンポーネントとセットで使用する。

    <template v-slot:activator="{ on }">
      <v-btn v-on="on">
        AAA
      </v-btn>
    </template>
    <span>BBB</span>

ここではv-btnとセットになっているので、「AAA」ボタンをクリックすると、「BBB」を表示する処理となる。

## v-btn

<v-btn v-on="on"
        small
        tile
        text
        :disabled="disabled"
        :color="command.color"
        @click="$emit('click', $event)">
</v-btn>

v-btnはボタンを表示するコンポーネント。

v-on="on"
名前付きスロットのv-slot:activator="{ on }"と紐けている。

・small :
ボタンのサイズ。
Xlarge > Large > Medium(デフォルト) > Small > XSmall

・tile :
四隅を角にする。border-radiusを除去する。

・text :
背景を透明にする。

・:disabled="disabled" :
vueの表記で、v-bindの省略形。HTMLタグの中で使うことで属性を付与している。

disabled属性として"disabled"という変数を設定している。
「:属性名="値"」

disabledはブーリアンでtrueの場合はボタンが押せない状態になる（非活性）

・:color="command.color" :
vueの表記で、v-bindの省略形。
color属性を設定している。

・@click="$emit('click', $event)" :
vueの表記。＠はv-on:の省略形。

• v-on:click クリックイベント

• $emit:
  コンポーネントの外（htmlファイル）にデータを渡す。
  受け取り側は、設定されたイベント名を「@イベント名」で受け取る必要がある。

• 'click': 渡すイベントの名前。
  HTMLファイルのタグ属性で、@click="メソッド名"を記述すると、クリックを感知して処理を実行できる。

• $event:
  元のDOMを渡す。
  https://v1-jp.vuejs.org/guide/events.html

v-btn
API

v-icon

<v-icon>{{ command.icon }}</v-icon>

v-iconはアイコンを表示するコンポーネント。
mdi+アイコンの名前で呼び出せる。(mdi = Material Design Icon)

上記例では、commandプロパティの値iconを呼び出している。
直接設定する場合は下記のように記述。

    <v-icon
      large
      color="teal darken-2"
    >
      mdi-email
    </v-icon>

大きいサイズで、色はティール（青と緑の中間色）のe-mailアイコンを表示。

v-icon
iconの種類

かなりの種類のアイコンが使用可能。