Vue.jsとBootstrapで切替可能なモーダルをお手軽簡単に実装する

簡単にモーダル作りたい

bootstrapだと一瞬です

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

jQueryとBootstrapを読み込んで
https://getbootstrap.com/docs/4.0/components/modal/
htmlをこれに習って設定すればすぐ出来ます

切替可能なモーダルにしたい

上記のモーダルを切替可能にするのもVue.js使えば簡単に出来ます。

index.html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <modal v-show="current == '1'" :key="1">
      <h5 class="modal-title" id="imgModalLabel" slot="title">ステップ1</h4>
        <div slot="body">
          ステップ1
        </div>
        <button type="button" class="btn btn-secondary" slot="prvbtn" data-dismiss="modal">戻る</button>
        <button type="button" class="btn btn-primary" slot="nextbtn" @click="current = 2">ステップ2へ</button>
    </modal>
    <modal v-show="current == '2'" :key="2">
      <h5 class="modal-title" id="imgModalLabel" slot="title">ステップ2</h4>
        <div slot="body">
          ステップ2
        </div>
        <button type="button" class="btn btn-secondary" slot="prvbtn" @click="current = 1">ステップ1へ</button>
        <button type="button" class="btn btn-primary" slot="nextbtn" @click="current = 3">ステップ3へ</button>
    </modal>
    <modal v-show="current == '3'" :key="3">
      <h5 class="modal-title" id="imgModalLabel" slot="title">ステップ3</h4>
        <div slot="body">
          ステップ3
        </div>
        <button type="button" class="btn btn-secondary" slot="prvbtn" @click="current = 2">ステップ2へ</button>
        <button type="button" class="btn btn-primary" slot="nextbtn" data-dismiss="modal">終了</button>
    </modal>
  </div>
</div>

app.js

const modal_template = {
  template: `
      <div class="modal-content">
        <div class="modal-header">
            <slot name="title"></slot>
        </div>
        <div class="modal-body">
        <slot name="body"></slot>
        </div>
        <div class="modal-footer">
            <slot name="prvbtn"></slot>
            <slot name="nextbtn"></slot>
        </div>
      </div>
`
}
const app = new Vue({
  el: '#exampleModal',
  components: {
    'modal': modal_template,
  },
  data: {
    current: 1,
  },
})

ボタン部分なんかはもう少し効率化できそうですが、汎用化させてた方が便利だったので
テンプレート使うと余計な部分は重複して書かなくて済むのですっきり
v-showでなくv-ifでも同じことできます。そこは用途に合わせてですかね

サンプルはこちら