カスタマイズした内容
<template>の<div>要素のidではなく、<div>要素そのものを Dropzone を紐づくようにした。- Dropzone の options を渡せるようにした。
投稿者: oki2a24
やったこと
- Select2 の config をなんでも受け取れるようにする。
propsの変更検知は 1 つの watch にまとめられるのではないか?- Bootstrap 4 テーマの時、バリデーションエラーのスタイルを適用できるようにする。
はじめる前に
本投稿は時系列としては Laravel 6 、 Vue.js 3 の SPA で npm run production が失敗する問題を修正する – oki2a24 の続きとなります。
作ったものの構成
- モーダルを呼び出すページを用意する。
- モーダルに表示するコンテンツ部分を 1 つの別のコンポーネントとして作成する。このモーダルコンテンツコンポーネントから、基底となるモーダルコンポーネントを呼び出す。
- モーダルの外側を 1 つのコンポーネントとして作成する。基底モーダルコンポーネントと呼ぶ。ここが Bootstrap 4 のモーダルをラップした部分。
使うときのポイント
- モーダルがマウントされるのは、モーダル呼び出し元のページがマウントされる時と同じタイミングとなる点に注意。モーダル表示のタイミングで実行したいことがあるならば、モーダルのイベントを使う必要がある。
- モーダル SFC を使うコンテンツコンポーネントで設定した HTML の id は props で与えないような構造としてしまってもよいと思った。ただし、そうするとモーダルを呼び出す側がコンテンツコンポーネントの内部に書かれている HTML id を調べに行く必要が出てくるので、やりづらさを感じる。
はじめる前に
環境構築と指定は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きとなります。純粋な時系列としては Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った – oki2a24 の続きとなります。
やりたいこと
- Vue.js 3 で作った SPA で、デイトピッカーを使いたい。
- flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies がよさそうで、今回これをとりあげる。
- 公式ドキュメント → Introduction
- 簡単に使いたいので、デイトピッカーのシングルファイルコンポーネント (SFC) を用意したい。
- 簡単に使えそうなラッパーライブラリ ankurk91/vue-flatpickr-component: Vue.js component for Flatpickr datetime picker があるので、これを利用してみた。
ちなみに、 Vue.js 3 でラップしてコンポーネント化した Dropzone.js にちょっとしたカスタマイズをいくつか加えた – oki2a24 あたりの続きになります。
やりたいこと
- Dropzone.js エリアの文言を変更したい。
- ファイルアップロード成功後は Dropzone.js エリアのサムネイルを自動的に消したい。
- アップロードエラー時のメッセージを変更したい。
- ファイルアップロード失敗後は Dropzone.js エリアのボタンクリックでサムネイルを消したい。
まとめ
select2-theme-bootstrap4パッケージを追加する。- SASS の
laravel/resources/sass/app.scssでselect2-theme-bootstrap4/dist/select2-bootstrap.min.cssを読み込む。 - Select2 の初期設定で、
theme: "bootstrap"とする。
やりたいこと
都道府県のセレクトボックスを Select2 で作る。フォーム入力で選択肢を絞りこめるが、このとき選択肢文字列だけではなくひらがな、アルファベット (半角) でも絞り込めるようにしたい。
Select2 に渡す選択肢の配列は次を想定している。
const options = [
{ id: "1", text: "北海道", hiragana: "ほっかいどう", alphabet: "hokkaido" },
{ id: "2", text: "青森県", hiragana: "あおもりけん", alphabet: "aomoriken" },
{ id: "3", text: "岩手県", hiragana: "いわてけん", alphabet: "iwateken" },
{ id: "4", text: "宮城県", hiragana: "みやぎけん", alphabet: "miyagiken" },
{ id: "5", text: "秋田県", hiragana: "あきたけん", alphabet: "akitaken" },
];
ちなみに本投稿は Vue.js 3 で Select2 をラップして SFC (シングルファイルコンポーネント) としてコンポーネント化する例 – oki2a24 の続きにあたります。
まとめ
次のことを行えば可能と予想し、実際に実現できました。
- Select2 へ渡す Options に適当なプロパティ A, B を追加する。
- Select2 で絞り込むときにプロパティ A, B も含めて検索する。
やりたいこと
- Vue.js 3 で Select2 をラップしたい
Vue.js 2 では、 ラッパーコンポーネント — Vue.js にて実際に Select2 のラッパーを作った例が提示されていました。
今回、 Vue.js 2 ではなく、 Vue.js 3 でこれを使いたい、というのが目的です。
なお、本投稿は Vue.js 3 でラップしてコンポーネント化した Dropzone.js の SFC (シングルファイルコンポーネント) を作り、利用する例を作った – oki2a24 の続きとなります。