👾

【vuetify】v-paginationのprev、nextボタンとかのカスタム方法

2024/05/12に公開

Nuxt 3

Vuetify 3

tech

はじめに

最近、育成している友達にNuxt3での開発をしてもらっている時にvuetifyの公式ドキュメントがわからないという質問を受けたのでまとめます

参考サイト

vuetifyの参考サイトがあまりいいのがなかったけど、結局は公式が全てです
わかりにくいだけです

v-paginationの公式
 v-paginationの公式のComponentの詳細ページ

インストール

ここは割愛します。vueだったりNuxtだったりvue cli使ったり色々あるので。。。
公式見てください

実装

basic

<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

<template>
  <main>
    <!-- basic -->
    <v-pagination :length="4"></v-pagination>
  </main>
</template>

まあこんな感じになる

スクリーンショット 2024-05-04 9.08.34.png

props

active-colorの色を変更する

<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

<template>
  <main>
    <!-- props -->
    <v-pagination 
      :length="4"
      active-color="red"
    ></v-pagination>
  </main>
</template>

propsはこんな感じに設定

スクリーンショット 2024-05-04 9.10.50.png

event

prevボタンとnextボタンのクリックイベントを追加

<script setup>
import { ref } from 'vue'

const page = ref(1)

const onClickPrev = (n) => {
  console.log(n);
}

const onClickNext = (n) => {
  console.log(n);
}
</script>

<template>
  <main>
    <!-- events -->
    <v-pagination 
      :length="4"
      @prev="onClickPrev"
      @next="onClickNext"
    ></v-pagination>
  </main>
</template>

@{event name}の形で書く
今回だとprevとnextのボタンをクリックするとonClickPrevとonClickNextが呼び出される

slot

prevとnextのslotをカスタムする

<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

<template>
  <main>
    <!-- slot -->
    <v-pagination v-model="page" :length="4">
      <template #next="{ onClick, disabled }">
        <div v-show="!disabled">
          <button @click="onClick">
            <p>Next</p>
            <span class="mdi mdi-chevron-right" />
          </button>
        </div>
      </template>
      <template #prev="{ onClick, disabled }">
        <div v-show="!disabled">
          <button @click="onClick">
            <p>Prev</p>
            <span class="mdi mdi-chevron-left" />
          </button>
        </div>
      </template>
    </v-pagination>
  </main>

スクリーンショット 2024-05-04 9.30.07.png

<template #prev>でslotの設定します
スコープ付きスロットでpropsを渡してます

この辺参照してください

例えば、nextスロットの場合以下のようなpropsを受け取れます

// next
{
  icon: any
  onClick: (e: Event) => void
  disabled: boolean
  'aria-label': string
  'aria-disabled': boolean
}

ソース

今回使用したコードはこちらにあります

最後に

propsはusageのところに多少使い方があるので、それの応用で大体使えると思う
eventとかslotはサンプルがなくて初学者やあんまりvueとかreactとかに触れていないときついなと思う

自分も正直ドキュメント見ただけだとわからなくて、だいたいこういう感じじゃないで実装していけた感じです英語だし

公式ドキュメントが全てであり絶対的に正しいというのは間違いないと思うけど難解って話でした