vue-实验-框架实验+弹窗实验

最新推荐文章于 2024-04-28 23:05:28 发布

科学的发展-只不过是读大自然写的代码

最新推荐文章于 2024-04-28 23:05:28 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/109047076

版权

1.概述

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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>vue-框架实验</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</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://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

2.2.main.js

2.3 index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
</head>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/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 运行效果

科学的发展-只不过是读大自然写的代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-实验-框架实验+弹窗实验

1.概述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.
复制链接

扫一扫