【前端】VUE 在线运行模拟器通过字符串动态渲染页面可以灵活使用

一个灵活的死胖子

于 2024-08-28 03:05:12 发布

阅读量32

点赞数

文章标签：前端 vue.js javascript ecmascript 前端框架

【前端】VUE2 在线运行模拟器通过字符串动态渲染页面可以灵活使用

【前端】VUE 在线运行模拟器通过字符串动态渲染页面可以灵活使用_vue.js

<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>