【前端】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="templateStr" :rows="15" />
    <p>data内容:</p>
    <a-textarea v-model="dataStr" :rows="15" />
    <p>methods内容:</p>
    <a-textarea v-model="methodsStr" :rows="15" />
    <p>other 其他内容:</p>
    <a-textarea v-model="otherStr" :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 {
      templateStr: `
        <div>
          <h1>{{消息内容}}</h1>
          <a-button @click="changeMessage">点击改变消息内容</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>
      `,
      dataStr: `
        {
          消息内容: 'Hello from templateString!'
        }
      `,
      methodsStr: `
        {
            /**
             * 改变消息内容
             */
            async changeMessage() {
              // alert(1111)
              // 动态导入 AProgress 组件  这里是不行的, 必须在上层VUE中引入组件 然后通过 components的方式引入
              // const AProgress = await import('ant-design-vue/lib/progress');
              this.消息内容 = '我是改变之后的消息' + new Date();
            },
            // 可以在这里添加更多的方法
         }
      `,
      /**
       * 其他内容 例如
       *
       *  created () {
       *     this.createDynamicComponent()
       *   },
       *   watch: {
       *
       *   }
       *
       */
      otherStr: `
        {

        }
      `,
      component: null
    };
  },
  created () {
    this.createDynamicComponent()
  },
  /**
   * 监听
   */
  watch: {
    templateStr(newStr) {
      this.createDynamicComponent();
    },
    dataStr(newStr) {
      this.createDynamicComponent();
    },
    methodsStr(newStr) {
      this.createDynamicComponent();
    },
  },
  methods: {
    /**
     * 创建动态组件
     * @returns {any}
     */
    async createDynamicComponent() {

      // 动态导入 AProgress 组件
      const AProgress = await import('ant-design-vue/lib/progress');

        //动态解析data字符串
        let tdata = eval('(' + this.dataStr + ')');
        let tMethods = eval('(' + this.methodsStr + ')');
        let tOther = eval('(' + this.otherStr + ')');

        // 使用 Vue.component 创建动态组件
        this.component = Vue.component('dynamic-component', {
          //动态解析模板内容
          template: this.templateStr,
          data(){
            //注入data数据
            return tdata
          },
          /**
           * 引入组件
           */
          components: {
            'a-progress': AProgress.default, // 在动态组件中注册组件
          },
          methods: tMethods,
          ...tOther
      });


    },
  }
};
</script>