|
1.动态追ifarme $('#frameId3').attr('src', './index2.html'); 2.动态载入js(弹窗) 2.1动态载入 import(path + componentName + '.js').then((component) => { this.dynamicComps.push({name: componentName}); }); 2.2.refs调用 this.getParentApp().$refs['list'][0].init(achievement, grade, color); 2.实验代码 1工程结构 2.代码 2.1 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www."> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>vue-框架实验</title> <!-- import CSS --> <link rel="stylesheet" href="https://www."> </head> <body> <div id="app"> <iframe id="frameId3" src="" style="height: 230px" frameborder="0"></iframe> <div v-for="comp in dynamicComps"> <component :ref="comp.name" v-bind:is="comp.name"></component> </div> </div> <!-- import Vue before Element --> <script src="https:///vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://www."></script> <script src="https://cdn./jquery/1.10.2/jquery.min.js"></script> <script type="module" src="./main.js"></script> </body> </html> 2.2.main.js window.parentApp = new Vue({ data() { return { dynamicComps: [] } }, methods: { importComponent(componentName, path) { //import(path + componentName + '.js').then((component) => { import(path + componentName + '.js').then((component) => { this.dynamicComps.push({name: componentName}); }); }, setSrc() { $('#frameId3').attr('src', './index2.html'); } }, mounted() { this.setSrc(); } }); $(document).ready(() => { window.parentApp.$mount('#app'); }); 2.3 index2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www."> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> </head> <!-- import Vue before Element --> <script src="https://www."></script> <!-- import JavaScript --> <script src="https://www."></script> <script src="https://www./1.10.2/jquery.min.js"></script> <script type="module" src="./main2.js"></script> <script src="./box.js"></script> <body> Vue实验 <div id="app"> <template> <el-container> <p>弹窗实验</p> <el-main style="position: relative;"> <box ref="summaryPanel" > </el-main> </el-container> </template> </div> </body> </html> 2.4 var Main = new Vue({ data() { return { isSummaryPanelShow: true, }; } }); $(document).ready(function () { Main.$mount('#app'); }); 2.5 box.js Vue.component('box', { template: `<div style=""> <div> <button @click="getObjManager()">弹窗测试</button> </div> </div> `, data() { return { isShow: true, loading: true, nameDialogVisible: false, isFocusHeaderShow: false, dynamicComps: [] }; }, mounted() { this.importComp(); }, methods: { getParentApp() { let scope = window.parent.parentApp; if(!scope){ scope = this; } return scope; }, importComp() { let scope = this.getParentApp(); scope.importComponent('list', './v/'); }, getObjManager() { var achievement, grade, color; //alert("getObjManager"); this.getParentApp().$refs['list'][0].init(achievement, grade, color); }, importComponent(componentName, path) { import(path + componentName + '.js').then((component) => { this.dynamicComps.push({name: componentName}); }); } } }); 2.6 list.js const list = Vue.component('list', { template: ` <div class="monitor_coverage_list"> <el-dialog title='my dialog title' :visible.sync="dialogVisible" width="90%" top="1vh" @close='handleClose'> <p>my dialog body</p> </el-dialog> </div>`, data() { return { loading:false, dialogVisible:false, }; }, mounted() { //alert("mounted"); }, methods: { init(achievement, grade, color){ this.dialogVisible = true; }, handleClose(){ this.dialogVisible = false; }, } }); export { list }; 3 运行效果 |
|
|
