87
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vuetifyのv-slot:activatorの使い方

Last updated at Posted at 2019-07-28

※v-slotの構文はVue 2.6.0以上から使用できます。

v-slotの使用方法は以下の公式ドキュメントに説明があります。
https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88

##v-slot:activatorとは?
Vuetifyでv-slot:activatorというスロットをよく見かけます。
これは特定の条件時(クリック時・ホバー時のみなど)のみポップアップする場合のトリガー用のスロットとして用意されています。

TL;DR

  • activatorスロットにはポップアップを付与したい要素を記述
  • デフォルトスロットにはポップアップで表示する要素を記述
    • @totto357さんからコメント欄で補足していただきました。ありがとうございます。

ドロップダウンメニュー(v-menu)

https://vuetifyjs.com/en/components/menus
dropdown.gif

v-menu.vue
<v-menu>
  <template v-slot:activator="{ on }">
    //ポップアップを追加したい要素に対しv-on="on"を追加
    <v-btn color="primary" dark v-on="on">Dropdown</v-btn>
  </template>
  //ポップアップの内容
  <v-list>
    <v-list-item v-for="n in 3" :key="n">
      <v-list-item-title>{{ n }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

ツールチップ(v-tool-tip)

tooltip.gif

v-tooltip.vue
<v-tooltip bottom>
    //ポップアップを追加したい要素に対しv-on="on"を追加
    <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Button</v-btn>
    </template>
    //ポップアップの内容
    <span>Tooltip</span>
</v-tooltip>

どちらもv-slot:activatorを使用してポップアップを実現しています。
コードも似ていますね。

補足

v-slot:activator="{ on }

このスロットプロパティのonが何者かというと、イベントハンドラのようです。
※ドロップダウンではクリック・ツールチップではホバーなど。

コンポーネントごとにカプセル化されているので、使用する側はそのままバインドするだけで大丈夫そうですね。

87
63
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
87
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?