Vueで可変モーダルを実装する - Qiita
はじめに ドラッグで移動、拡大縮小ができるモーダルを作ってみました。 早速完成形からお見せします。 モーダルの移動 サイズ調整 移動 まずは、ヘッダー部分をドラッグすることでモーダルが移動ができるようにします。 1. テンプレート <template> <div class="draggable-modal" :style="{ width: `${modalWidth}px`, height: `${modalHeight}px`, transform: `translate(${pos.x}px, ${pos.y}px)`, }" > <div class="header" @mousedown=" (e) => { adjustDragStart(e) } " > header </div> <div class="body">body</div> </div> </template
＊Vue 3系＊ モーダルウィンドを作成 - Qiita
はじめに Vue3系を勉強し始めてcomponentを使う練習をしたかったので モーダルを作ってみた時の忘備録です。 また、初心者のため Emit（子→親）についても整理しながらの記事になります。 もうVueを使い倒している方には向かない内容につき 時間の無駄になってしまうので読まないでくださいね！！！ 私は、今までVue2系の"vue-property-decorator"を使用していたので Vue3系の勉強をしながら作成したものになります。 不備等もあると思いますがご了承ください。 ＊関連ワード Vue.js 3系 / TypeScript / SCSS / component / Mac OS / Modal / emit 完成形 ディレクトリ構成 ディレクトリ内 ※ storeやrouterなど使用していないものは省略しています src/ ┣ components/ │ ├ He
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
