動的モーダル

v-on:clickのとき、値を渡し動的に表示するモーダルがほしい。
モーダルは、画像のみ表示するもの。動画などをiframeで表示するものの2種類を用意。

画像用

<div><a href="#" @click.stop.prevent="openModal(0)">全体拡大</a>

<Modal :val="showImg" v-if="showModal" @close="showModal = false"></Modal>

<script type="text/x-template" id="modal-template">
 <transition name="modal">
   <div class="modal-mask" v-on:click.self="$emit('close')">
    <div class="modal-container">
      <img :src="val.src" />
    </div>
   <div class="modal-footer">
   <slot name="footer">
     <i class="material-icons" v-on:click="$emit('close')">close</i>
   </slot>
  </div>
 </div>
</div>
</transition>
</script>

<script>
 Vue.component("Modal", {
   template: "#modal-template",
   props:['val']
 });

const app = new Vue({
  el: '#wrap',
  data: {
    showModal: false,
    showImg :'',
    modalImgs: [
	{ src: 'img/shaze.png'},
	{ src: 'img/shaze2.png'}
	],
  },
  methods:{
   openModal(item){
     this.showModal = true;
     this.showImg = this.modalImgs[item];
    },
 }
})
</script>

methodsで表示エリアにデータを渡す。
そのデータの受取は、:val="showImg"

css

/*モーダルウィンドウ*/
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}


.modal-container {
  margin: 0px auto;
  padding: 5px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header {
	background: #eee;
	padding: 2px;
}

.modal-footer{
	text-align: right;
}
.modal-footer i {
	cursor: pointer;
}

.modal-leave-active {
  opacity: 0;
}

.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

ifame

<a href="#" @click.stop.prevent="openModal">会社紹介ビデオ</a>

<Modal :val="showImg" v-if="showModal" @close="showModal = false"></Modal>

<script type="text/x-template" id="modal-iframe">
<transition name="modal">
 <div class="modal-mask" v-on:click.self="$emit('close')">
  <div class="modal-container">
   <header class="modal-header">
    {{ val.title }}
   </header>
  <iframe :src="val.src" style="width:680px; height:380px;" />
 <div class="modal-footer">
  <slot name="footer">
   <i class="material-icons" v-on:click="$emit('close')">close</i>
  </slot>
  </div>
 </div>
 </div>
 </transition>
</script>

<script>
Vue.component("Modal", {
  template: "#modal-iframe",
  props:['val']
});

const app = new Vue({
  el: '#wrap',
  data: {
    showModal: false,
    showImg : '',
    modalFrame:{
	title:'会社紹介ビデオ',
	src: '../product/youtube.php?file=company'
	}
  },
 methods:{
  openModal(){
    this.showModal = true;
    this.showImg = this.modalFrame;
   },
 }
})
	</script>