【前端】VUE 在线运行 模拟器 通过字符串动态渲染页面 可以灵活使用
原创
©著作权归作者所有:来自51CTO博客作者我是Superman丶的原创作品,请联系作者获取转载授权,否则将追究法律责任
【前端】VUE2 在线运行 模拟器 通过字符串动态渲染页面 可以灵活使用
<template>
<div>
<!-- 这里是动态组件-->
<component :is="component"></component>
<!-- 这里是动态组件-->
<br />
<br />
<br />
可以理解为是一个vue模拟器 虚拟机
以上是渲染的内容, 修改以下内容会实时动态渲染上边的组件 vue代码中怎么写 这里就怎么写 当成编辑器
这里用的是https://1x.antdv.com/components/input-cn/ UI库 VUE2
<p>模板内容: template 中的内容</p>
<a-textarea v-model="virtualTemplateStr" :rows="15" />
<p>data内容:</p>
<a-textarea v-model="virtualDataStr" :rows="15" />
<p>methods内容:</p>
<a-textarea v-model="virtualMethodsStr" :rows="15" />
<p>other 其他内容:</p>
<a-textarea v-model="virtualOtherStr" :rows="15" />
</div>
</template>
<script>
//动态模板中 使用到的组件 需要提前引入
/**
* 然后使用 components
* components: {
* 'a-progress': AProgress, // 在动态组件中注册组件
* },
*/
import Vue from 'vue';
//这里如果之前全局引用过 则不用再引用
import Antd from 'ant-design-vue';
//这里如果之前全局引用过 则不用再引用
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
export default {
data() {
return {
/**
* 模板内容 str形式的
*/
virtualTemplateStr: `
<div>
<h1>{{消息内容}}</h1>
<a-button @click="changeMessage">点击改变消息内容 并打印组件相关日志F12查看控制台</a-button>
<a-progress :percent="30" />
<a-progress :percent="50" status="active" />
<a-progress :percent="70" status="exception" />
<a-progress :percent="100" />
<a-progress :percent="50" :show-info="false" />
</div>
`,
/**
* 虚拟组件data数据
*/
virtualDataStr: `
{
//这里this指向是当前页面的this 而不是虚拟组件的this 所以用这个可以访问当前页面的属性方法等
//也可以使用 this.$parent 获取
父组件this: this,
消息内容: 'Hello from templateString!',
//这里可以添加更多变量
}
`,
virtualMethodsStr: `
{
/**
* 改变消息内容
*/
changeMessage() {
//this.speak()
// this.父组件this.speak()
//调用真实页面的方法 同 this.父组件this.speak()
this.$parent.speak()
console.info('真实页面的this:', this.$parent)
console.info('当前虚拟组件页面的this:', this)
// 动态导入 AProgress 组件 这里是不行的, 必须在上层VUE中引入组件 然后通过 components的方式引入
// const AProgress = await import('ant-design-vue/lib/progress');
this.消息内容 = '我是改变之后的消息' + new Date();
},
// 可以在这里添加更多的方法
test(){
alert('我是虚拟组件test方法')
}
}
`,
/**
* 其他内容 例如
*
* created () {
* this.createDynamicComponent()
* },
* watch: {
*
* }
*
*/
virtualOtherStr: `
{
}
`,
component: null
};
},
created() {
this.createDynamicComponent()
},
/**
* 监听
*/
watch: {
virtualTemplateStr(newStr) {
this.createDynamicComponent();
},
virtualDataStr(newStr) {
this.createDynamicComponent();
},
virtualMethodsStr(newStr) {
this.createDynamicComponent();
},
},
methods: {
speak(){
console.log('我是真实页面的方法')
},
/**
* 创建动态组件
* @returns {any}
*/
async createDynamicComponent() {
// 动态导入 AProgress 组件
const AProgress = await import('ant-design-vue/lib/progress');
//动态解析data字符串
let tdata = eval('(' + this.virtualDataStr + ')');
let tMethods = eval('(' + this.virtualMethodsStr + ')');
let tOther = eval('(' + this.virtualOtherStr + ')');
// 使用 Vue.component 创建动态组件
this.component = Vue.component('dynamic-component', {
//动态解析模板内容
template: this.virtualTemplateStr,
data() {
//注入data数据
return tdata
},
/**
* 引入组件
*/
components: {
'a-progress': AProgress.default, // 在动态组件中注册组件
},
methods: tMethods,
...tOther
});
},
}
};
</script>