1年以上も前に、Vue.js Bootstrap のモーダルのサンプルを書いていた。
oboe2uran.hatenablog.com
Vue.js でモーダルウィンドウで、リサイズ可や dragable 等ができないことに不満があった。
GitHub - euvl/vue-js-modal: Easy to use, highly customizable Vue.js modal library. が、MITライセンスで公開されています。
Installation | Vue.js Modal より、
Properties を参照すれば、リサイズやdraggable の説明がある。
Events を参照すれば、モーダルウィンドウを表示/非表示時のタイミングで
イベントを捕捉する方法が載っている。
Bootstrap デザインでサンプルを書いてみます。
CSSと JSの指定です。
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-js-modal@2.0.0-rc.6/dist/styles.css"> <link rel="stylesheet" href="test.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://cdn.jsdelivr.net/npm/vue-js-modal@2.0.0-rc.6/dist/index.min.js"></script> <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
HTML
<body> <div id="app" class="container-fluid all"> <h1>Vue.js + Bootstrap モーダル</h1> <div class="col-md-12"> <button v-on:click="show" type="button" class="btn btn-secondary custom-btn-in" >設定</button> <!-- モーダルウィンドウ --> <modal name="sample-modal" :draggable="false" :width="400" :height="200" :adaptive="true" :resizable="false" @before-open="beforeOpen" @opened="opend" @before-close="beforeClose" @closed="closed"> <!-- モーダルヘッダー --> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel" >タイトル</h5> <button v-on:click="hide" type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <!-- モーダル本文 --> <div class="modal-body"> <div class="form-group row"> <label for="user" class="col-3">Name</label> <input type="text" name="userName" id="userName" v-model="uname" class="col-3 form-control"> </div> </div> <!-- モーダルフッター --> <div class="modal-footer"> <button type="button" class="btn btn-primary" v-on:click="modalSubmit" data-dismiss="modal">更新</button> <button type="button" class="btn btn-secondary" v-on:click="hide" data-dismiss="modal">閉じる</button> </div> </modal> </div> <div> <span>{{message}}</span> </div> </div> </body> <script src="test.js"></script>
test.css
.modal-header, .modal-body { padding: 10px 30px; } .modal-header { border-bottom: 1px solid #d0d0d0; }
Vue.use(window["vue-js-modal"].default);
で適用させます。
test.js
show メソッド、hide メソッドでモーダルウィンドウの表示/非表示を切り替えます。
Vue.use(window["vue-js-modal"].default); var app = new Vue({ el: '#app', data:{ message: "test", uname: "" }, methods: { show : function() { this.$modal.show('sample-modal'); }, modalSubmit: function(v){ console.log( this.uname ); this.message = this.uname; this.$modal.hide('sample-modal'); }, hide : function(){ this.$modal.hide('sample-modal'); }, beforeOpen : function(e){ console.log(e); }, opend : function(e){ console.log(e); }, beforeClose : function(e){ console.log(e); }, closed : function(e){ console.log(e); } } })
modelタグ属性で、 @before-open="beforeOpen" と指定しているので、
メソッド = beforeOpen が働きます。