プロジェクトでVuetifyを使用したので、備忘録として。
使用したコンポーネントのまとめになるので、インストールなどの手順は省きます。
1.テーブル
<v-data-table>を使う。
APIで取得したデータをテーブル形式で表示したいときなんかに便利。コードはこんな感じ。
<v-data-table
fixed-header
:headers="headerItems"
:items="tableItems"
disable-sort
disable-pagination
:hide-default-footer="true"
/>
import Vue from "vue"
export default Vue.extend({
data() {
return {
tableHeaders: [
{ text: "Name", value: "name" },
{ text: "Age", value: "age" },
{ text: "Gender", value: "gender" }
],
tableItems: [
{ name: "Taro", age: 20, gender: "Male" },
{ name: "Hanako", age: 18, gender: "Female" },
{ name: "Ichiro", age: 25, gender: "Male" }
]
}
}
})
とりあえずこのふたりに任せておけばいい
headers：ヘッダーに設定したい項目をdataプロパティに定義しバインド
items：テーブルに表示させる項目をdataプロパティに定義しバインド
その他バイプレイヤーズ
disable-pagination：ページングを無効化
disable-sort：ソートを無効化。デフォルトではソートがONになっている為、ソートさせたくない場合に使用。
全ての項目に適用されるため一部項目のみソートをONにしたい場合は、:headersに渡している値でsortableを指定する。
こんな感じ。
tableHeaders: [
{ text: "Name", value: "name", sortable: false },
{ text: "Age", value: "age" },
{ text: "Gender", value: "gender", sortable: false }
],
items-per-page：１ページあたりに表示するitemの数を指定。デフォルトでは10件。
group-by：グループ化して表示したいときに使用
2.フォーム項目いろいろ
ボタン
<v-btn>を使用。アイコンやオプションを使うことで、様々なデザインを適用することができる。
基本的な書き方はこんな感じ。
<v-btn color="primary" dark>
Button
</v-btn>
使用できるオプションたち
dark, light：ダークテーマ、ライトテーマを設定。
color：ボタンの背景色を指定
disabled：trueでボタンを非活性に。メソッドを設定して、活性・非活性の切り替えなども行える
サイズはsmall、x-small、large、x-large以外にも直接width・heightで設定可能
こちらの記事でかなり詳しく書かれていました！
テキストボックス
<v-text-field>を使用。
<v-text-field
label="入力してください"
v-model="text"
placeholder="Placeholder"
counter="10"
hint="入力中。最大10文字"
color="green darken-5"
clearable
maxlength="10"
></v-text-field>
使用できるオプションたち
label：テキストボックス上部に表示させたいテキスト
placeholder：デフォルトで表示させておくテキスト
counter：文字数カウンター
outlined：アウトラインスタイルを適用
rules：バリデーションルールを設定
readonly：読み取り専用、入力できないよう設定
clearable：入力時、入力したものをクリアする機能の追加。デフォルトでアイコンが設定される
clear-icon：clearableを使用して、テキスト入力された時に適用される
オートコンプリート
<v-autocomplete>を使用。APIから取得した大量のデータを表示するときなんかに便利。
<v-autocomplete
v-model="model"
:items="items"
placeholder="入力できます">
</v-autocomplete>
使用できるオプションたち
items：プルダウンに表示されるリスト。
placeholder：デフォルトで表示させておくテキスト
<v-text-field>同様、outlinedやrulesなども指定できる
3.ダイアログ
ポップアップでダイアログを表示したいときに便利なのが<v-dialog>
調べてて初めて知りましたが、オーバーレイとやらも簡単に設定ができて便利なようです。
つらつら書いてありますが、v-modelを渡して（ここだとdialog）、trueなら表示/falseなら非表示という感じに表示切り替えを行います。
<template>
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2">
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
@click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
data () {
return {
dialog: false,
}
},
}
</script>
使用できるオプションたち
hide-overlay：オーバーレイを非表示
overlay-color：オーバーレイの色を設定
overlay-opacity：オーバーレイの不透明度を設定
persistent：要素をの外側をクリックしたり、escキーを押したりしても要素を無効に出来ないように設定
max-width：コンテンツの最大表示幅を設定
4.ツールチップ
ボタンやテキストなど要素にカーソルを当てた際に、情報を伝えたいときなどに使用します。
（カーソルがなく見えづらいですが、）「BUTTON」にカーソルを当てると「Tooltip」が表示されます。
<template>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Button
</v-btn>
</template>
<span>Tooltip</span>
</v-tooltip>
</template>
使用できるオプションたち
bottom：ツールチップを表示させる位置。その他top、right、leftも設定可能
disbled：trueに設定するとツールチップを非表示
max-width, min-width：ツールチップの表示幅を指定可能
v-slot:activatorってなに？？
vuetifyでは<template v-slot:activator="{ on, attrs }">というのがよくよく出てきますが、このonとattrsは何かというと。
onはクリックしたりホバーした時にポップアップする場合のトリガースロット、attrsはアクセシビリティのための属性が入ったオブジェクトらしい。正直attrsはあまり理解ができなかったので、説明カットします…ご存知の方いらっしゃったら教えてください(^0^)/
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
//ツールチップを適用したい要素に対しv-on="on"を追加
<v-btn color="primary" dark v-bind="attrs" v-on="on">Button</v-btn>
</template>
</v-tooltip>
onはイベントハンドラ的な役割を担っています。
今回はツールチップなのでv-onを設定しているボタンに対してホバーしたときにツールチップのイベントが発火する（＝表示される）みたいなイメージ。
５.カレンダー
v-date-pickerを使用することで簡単にカレンダーを描画させることができます。
カレンダーで選択した日付はv-modelで取得することができる
<template>
<v-row justify="center">
<v-date-picker v-model="picker"></v-date-picker>
</v-row>
</template>
<script>
export default {
data () {
return {
picker: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
}
},
}
</script>
使用できるオプションたち
allowed-dates：選択できる日付を制限する
disbled：trueに設定するとツールチップを非表示
max-width, min-width：ツールチップの表示幅を指定可能
最後に
以上ざっくりですがvuetifyのまとめでした。
使えるオプションたちは、よく使用したものを載せただけで一部になるので
もっと詳しく知りたい方は公式で調べてみてください！
参考記事
https://qiita.com/koushisa/items/3f74e1d103be1b969c47
https://qiita.com/is_ryo/items/6bfa55599becd2f35879
https://vuetifyjs.com/ja/