vue-js-modal を試す - Oboe吹きプログラマの黙示録

１年以上も前に、Vue.js Bootstrap のモーダルのサンプルを書いていた。
oboe2uran.hatenablog.com

oboe2uran.hatenablog.com

Vue.js でモーダルウィンドウで、リサイズ可や dragable 等ができないことに不満があった。

GitHub - euvl/vue-js-modal: Easy to use, highly customizable Vue.js modal library.　が、MITライセンスで公開されています。

Properties を参照すれば、リサイズやdraggable の説明がある。
Events を参照すれば、モーダルウィンドウを表示／非表示時のタイミングで
イベントを捕捉する方法が載っている。

Bootstrap デザインでサンプルを書いてみます。
ＣＳＳとＪＳの指定です。

<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>

ＨＴＭＬ

<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">&times;</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 が働きます。

f:id:posturan:20201228150728j:plain