現在、Vue.js 2とElementを使って、モバイル向け履歴書作成アプリを作成しているけど、学歴、職歴などでリスト要素の操作がいろいろ必要になってつくったので整理しておく。
前提としてモバイル（タッチパネル）向けなので、PCではよくあるドラッグでの移動は画面が長くなるとスクロールしてしまうため諦めた。面倒だけどすべてポチポチして操作する。
あとの機能はこんな感じ
- リスト要素はコンポーネントにして使い回せるように
- それぞれのリスト要素からできる操作は各要素から上下に追加、上下に移動、複製、削除
- リスト要素からのデータ操作はコンポーネントから$emitを通じてすべて親で行う
- 親から出来る操作は追加、並び替え、リセット
- 並び替えにはlodashの_.orderByを使う
- 本体の機能であるトランジションを使って、削除と追加時はアニメーション表示
今回のためにCodePenに登録して使ってみた。
実際の開発は下記テンプレートを使ってWebPack、Single File Componentでやっているので、CodePen用には書き直しになるためちょっと面倒。
GitHub - vuejs-templates/pwa: PWA template for vue-cli based on the webpack template
とりあえず動いたところまでで力尽きたので解説は後。
See the Pen Vue.js + Element List Control UI by yu yamazaki (@uyamazak) on CodePen.
