メインのhtmlファイルでモーダルのコンポーネントを開き、コンポーネント内ではiframeで外部ファイルを表示させるようにしています。
html
1<!-- main.html --> 2<div v-if="showInnerModal"> 3 <div class="modal-overlay"> 4 <modal iframe-path="./text.html" iframe-width="620" iframe-height="375" iframe-class="d-border-r4" v-on:from-modal-alert="closeModalAlert" v-on:from-modal="closeModal"></modal> 5 </div> 6</div>
javascript
1 2// modal.vue 3<template> 4 <div class="modal-content"> 5 <iframe 6 :src="modalItemPath" 7 :width="modalItemWidth" 8 :height="modalItemHeight" 9 :class="modalAddClass" 10 frameborder="0" 11 ></iframe> 12 </div> 13</template> 14 15<script> 16export default { 17 props: { 18 iframePath: { 19 type: String, 20 default: "" 21 }, 22 iframeWidth: { 23 default: 1020 24 }, 25 iframeHeight: { 26 default: 630 27 }, 28 iframeClass: { 29 type: String, 30 default: "" 31 } 32 }, 33 data() { 34 return { 35 modalItemPath: this.iframePath, 36 modalItemWidth: this.iframeWidth, 37 modalItemHeight: this.iframeHeight, 38 modalAddClass: this.iframeClass 39 }; 40 } 41}; 42</script> 43
javascript
1 2// main.js 3import ModalTemplate from '../components/modal.vue' 4 5new Vue({ 6 el: '#app', 7 components: { 8 'modal': ModalTemplate 9 }, 10 data() { 11 return { 12 showInnerModal: false 13 } 14 }, 15 methods: { 16 closeModalAlert: function(e) { 17 if (!confirm('画面を閉じても良いですか?')) { 18 e.preventDefault(); 19 return; 20 } 21 this.showInnerModal = false 22 }, 23 closeModal: function() { 24 this.showInnerModal = false 25 }, 26 closeFromModalAlert: function() { 27 this.$emit('from-modal-alert') 28 }, 29 closeFromModal: function() { 30 this.$emit('from-modal') 31 } 32}) 33
html
1 2<!-- iframe内で呼び出しているhtml --> 3<div class="buttons"> 4 <button type="button" v-on:click="closeFromModalAlert">キャンセル</button> 5 <button type="button" v-on:click="closeFromModal">完了</button> 6 </div>
closeFromModalAlert: function() { this.$emit('from-modal-alert') }, closeFromModal: function() { this.$emit('from-modal') }
ここで$emitを使って親側のmain.htmlに通知しているのですが、この場合、子コンポーネント内のiframeで読み込んでいるhtmlファイルからの操作は孫からになるのでしょうか??
もし孫となる場合は
https://qiita.com/tosite0345/items/4c90156883135fac880f
こちらのような方法をとるべきですか?
あなたの回答
tips
プレビュー