[Vue.js]モーダルダイアログを表示してみる

以前の記事で、v-tooltipとタブレイアウトを組み合わせてスクリプト実行ライブラリに使えないかと模索してみたが、見え方がイマイチだったので今日はVue.jsでモーダルダイアログみたいな表示するやつ作ってみた。

ベースはここを参考に。
モーダルコンポーネントの例

 

1.コンポーネントを書いてみた。

モーダルでスクリプトの内容を表示します。

コンポーネント内部でのstyle定義だとモーダルの背景グレーが<style scoped>のままだとページ全体に反映されなかったのでscopedを外しました。
あと、.modal-containerが見切れてスクロールできなかったので、height: 100%; overflow-y: auto; を追加しました。
v-on:click=”$emit(‘close’)”をモーダル背景含む全体にして、コピーボタンのイベントでだけe.stopPropagation();させて、それ以外のどこかをクリックしたらモーダル画面が終了する様にしてみたり🙄

 

2.ページに実装する。

スクリプト実行ライブラリのページをモーダルダイアログ表示にしてみる。

すると、こんな感じになると。




 

ちょっとイイ感じかもしれない😊

あとね、ちょっとしたエディタ機能を添えたいんだよねー🤔

コピペしながらリファレンス読むときって、メモ帳めっちゃ使っちゃうから。。。

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です