序文

ダッシュボードは数回行い、今回はその記録として簡単なバージョンを行うために、将来的に引き出しの機能を更新してから追加します。

vuetify ダッシュボード

vuetifyは、強力なコンポーネントライブラリで、これは紹介されていません、公式ウェブサイトを参照してください：vuetify

VuetifyはVueのためのセマンティックコンポーネントフレームワークで、アプリケーションの構築を容易にする、きちんとした、セマンティックで再利用可能なコンポーネントを提供するように設計されています。

効果

ソースコードのアドレスはこちら:vuetify

ツールバー

v-app-barコンポーネントは、アプリケーション全体のアクションや情報に使用されます。

• v-app-bar-nav-icon：v-toolbarとv-app-barのために特別に作成されたアイコンボタンコンポーネントです。通常、ツールバーの左側にハンバーガーメニューとして表示され、ナビゲーションドロワーの状態を制御するためによく使用されます。デフォルトスロットは、このコンポーネントのアイコンと機能をカスタマイズするために使用することができます。

その通り：

クリックイベントを制御することで、ボーダーバーの伸縮を制御できます。

 <v-app-bar-nav-icon @click="drawer = true"/>
 <v-navigation-drawer v-model="drawer"></v-navigation-drawer>
 
 data() {
 return {
 drawer: false,
 }
 }

スライドイン効果

左メニューバーのスライドイン効果は、v-navigation-drawerのtransitionプロパティで設定できます。

背景イメージ

Vナビドロワーには、イメージを挿入するためのスロットが付いており、完全なカバーが可能です。

 <v-navigation-drawer
 v-model="drawer"
 src="https://-../////_.eg"
 >

ルーティング

nuxtはvuexと統合されているため、ジャンプのルーティングや設定が非常に簡単です。

ジャンプ先のliquidText.vueを作成すると、router.jsに以下のようにパスが自動生成されます：

次に、vuetifyのリストコンポーネントを使用して、クリックされたときにジャンプするメソッドを追加して、異なるリストアイテムを生成するために各アイテムを繰り返し処理します。

<v-list-item-group v-model="item">
 <v-list-item
 v-for="(item, i) in items"
 :key="i"
 link
 @click="$router.push({ path: item.to })"
 >
 <v-list-item-icon>
 <v-icon>{{item.icon}}</v-icon>
 </v-list-item-icon>
 <v-list-item-content>
 <v-list-item-title>{{item.title}}</v-list-item-title>
 </v-list-item-content>
 </v-list-item>
 </v-list-item-group>
 
 //data
 items: [
 {icon: 'mdi-apps', title: 'Home', to: '/'},
 {icon: 'mdi-account', title: 'liquidText', to: '/svgdemo/liquidText'}
 ],

写真のような効果が得られます。