vue.js モーダルウィンドウ実装でコンポーネント理解 | アールエフェクト
vue.jsを使ってシングルページアプリケーションを構築するとモーダルウィンドウを使いたいという場面に多々遭遇します。bootstrapのcssフレームワークやVuetifyを利用してマニュアル通りに従うことで簡単に実装することができます。しかしいざという時のためにモーダルウィンドウの作り方を理解して自作できるように知識を深めておきましょう。 本文書では、モーダルウィンドウの作り方からvue.jsのコンポーネントでの実装方法まで入門者でもわかるように説明を行っていきます。利用しているVue.jsのバージョンは2とバージョン3です。バージョン3ではOptinos APIとComposition APIを利用した方法を記述しています。 モーダルウィンドウを作成するためにはvue.jsのいくつかの機能を利用して実装するためモーダルウィンドウについてだけではなく一緒にvue.jsの理解も深まります
Vuetify でなるべく疎結合になるように ref を使って Modal(モーダル)を実装する
Vuetify は Material デザインベースの Vue 用 Component ライブラリで、豊富なコンポーネントと丁寧なマニュアルが魅力だ。 Vuetify を使って Modal を実装する場合には v-dialogue component を使うといいと思う。(他にもっといいのあったら教えてください) 今回はこれをサンプルよりも疎結合になるように実装する方法について。ref を使う。 普通に実装する サンプルを元に簡単に実装すると次のようになる。 <template> <v-app> <div class="text-xs-center"> <v-dialog v-model="dialog" width="500" > <v-btn slot="activator" color="red lighten-2" dark > Click Me </v-btn> <v-card>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
