服务器表单字符串转化Vue表单挂在到对应DOM节点

今天在项目开发中，遇到从后端返回的vue文件(包含template，js，css)的文件，试过用v-html解析文件，渲染到页面，但是无法渲染，后来去查了一堆资料，自己写了一个全局方法来解析这类文件

1，在项目目录新建一个mixin文件，再创建一个strToVueFormMixin.js文件，文件内容为：

import {
  invokeServiceWait,
  checkRequestStatus,
  handleCallbackFn,
} from "@/InitMethods/formHttp";
export default {
  data() {
    return {
      _form: null,
      isStartLoad: false,
    };
  },
  methods: {
    /**
     * 替换元素的style font-size
     */
       replaceStyleFontSize(templateStr){
        let fontSize = localStorage.getItem('fontSizeMultiplier');
        // 存在获取fontSizeMultiplier为null时 默认字体放大倍数取1
        fontSize==null?fontSize=1:fontSize;
        if(fontSize){
          let fontSizeExp= /(\s?font-size:\s?)([0-9.]+)([a-zA-Z]*)/g
 
          //let fontSizeExp = /(\s?font-size:\s?)([0-9.]+)([a-zA-Z]*[\s|;|}|\)])/g;
          templateStr= templateStr.replace(fontSizeExp,(match, key, n, unit) => {
            console.log(match)
              return key + Number(n) * fontSize + unit;
          })
          return templateStr
        }
 
      },
    /**
     * 服务器表单字符串转化Vue表单挂在到对应DOM节点
     *
     * @param {String} formStr VueFrom文件的字符串
     * @param {String} queryStr Vue实例需要挂在DOM节点的id或者class
     *
     */
    strToVueForm(formStr, queryStr) {
      if (typeof formStr == "string" && formStr.length) {
        // 检查id是否存在
        if (!document.querySelector(`${queryStr}`)) {
          console.error('"id" or "class" does not exist!');
          return {};
        }
        let fromStyleDom = null;
        let styleBegin = 0; // style截取开始位置
        let styleEnd = 0; // style截取结束位置
        let templateBegin = 0; // template截取开始位置
        let templateEnd = 0; // template截取结束位置
        let scriptBegin = 0; // script截取开始位置
        let scriptEnd = 0; // script截取结束位置
 
        // 解析Vue字符串文件中的样式并添加到app全局中
        if (formStr.indexOf("<style") > -1) {
          styleBegin = formStr.indexOf("<style") + "<style".length;
          styleEnd = formStr.indexOf("</style>");
          let styleStr = formStr.substring(styleBegin, styleEnd);
          // 再次去除stlye中的属性设置（例如：lang="sass" scoped）
          let styleStartIndex = styleStr.indexOf(">") + 1;
          styleStr = styleStr.substring(styleStartIndex);
          // 添加到全局样式中
          if (styleStr) {
            fromStyleDom = document.createElement("style");
            fromStyleDom.innerHTML = styleStr;
            // style样式插入header中
            document.head.appendChild(fromStyleDom);
          }
        }
 
        // 解析Vue字符串模板中的template以及script并挂到对应的dom节点
        templateBegin = formStr.indexOf("<template>") + "<template>".length;
        templateEnd = formStr.lastIndexOf("</template>");
        let templateStr = formStr.substring(templateBegin, templateEnd);
        templateStr = templateStr
          .replace(/\r\n/g, " ")
          .replace(/\n/g, " ")
          .replace(/"/g, '\\"');
        console.log("templateStr前",templateStr)
        templateStr=this.replaceStyleFontSize(templateStr)
        console.log("templateStr后",templateStr)
        templateStr = 'let formtemplate ="' + templateStr + '";\n';
        scriptBegin = formStr.indexOf("<script>") + "<script>".length;
        scriptEnd = formStr.indexOf("</script>");
        let scriptStr = formStr.substring(scriptBegin, scriptEnd);
        // 防止window.vue.extend之前还定义了变量导致Cusform赋值无法得到window.vue.extend
        if (scriptStr.indexOf(window.vue.extend) != 0) {
          scriptStr = scriptStr.replace(
            /window.vue.extend/,
            "var Cusform = window.vue.extend"
          );
        } else {
          scriptStr = "let Cusform =" + scriptStr;
        }
        let insetIndex =
          scriptStr.indexOf("window.vue.extend({") +
          "window.vue.extend({".length;
        // 添加beforeDestroy
        let destroyMixinStr = `
        mixins:[{
          beforeDestroy: function() {
            fromStyleDom && fromStyleDom.remove()
          }
        }],`;
        scriptStr =
          scriptStr.slice(0, insetIndex) +
          destroyMixinStr +
          scriptStr.slice(insetIndex);
        // console.log("scriptStr:", scriptStr);
        let Cusform = eval(templateStr + scriptStr + ";" + "Cusform");
        this.isStartLoad = false;
        Cusform.prototype.invokeServiceWait = invokeServiceWait;
        Cusform.prototype.isStartLoad = false;
        Cusform.prototype.checkRequestStatus = function () {
          return checkRequestStatus(this.isStartLoad);
        };
 
        let vueForm = new Cusform().$mount(`${queryStr}`);
 
        this._form = vueForm;
        vueForm.isStartLoad = true;
        this.isStartLoad = true;
 
        return vueForm;
      } else {
        return {};
      }
    },
  },
  beforeDestroy() {
    this._form && this._form.$destroy();
  },
};

2，如何使用：

在新建文件是要用到mixin时，我们只要引入就可以使用了

新建MyPaidLeaveInfo.js文件：

import strToVueFormMixin from '@/mixins/strToVueFormMixin';
export default {
  mixins: [strToVueFormMixin],
  name: 'PaidLeaveInfoPC',
  data() {
    return {
      fileStr:'',
      myForm:{},
      formLoadStatus: null,
    }
  },
  mounted() {
  this.init();
  },
  methods: {
    // 获取PaidLeaveInfoPC表单
    getFile() {
      return new Promise((resolve, reject) => {
        this.invokeService(
          'AnnualLeave',
          'GetCustomForm',
          ['PaidLeaveInfoPC'],
          msg => {
            const $ = msg.ReturnData.$;
            if ($.Succeed) {
              const fileStr = Lark.base64Decode($.Data);
              this.fileStr = fileStr;
              resolve(fileStr);
            } else {
              reject();
            }
          },
          err => {
            reject(err);
          }
        );
      });
    },
    init() {
      this.formLoadStatus = new Promise((resolve, reject) => {
        this.getFile()
          .then(file => this.fileToHtml(file))
          .then(() => {
            resolve();
          })
          .catch(err => {
            console.log(err,'err');
            reject();
          });
      });
    },
    // 后端返回的数据转为vhtml
    fileToHtml(file) {
      file = file.replace(/wfm-popup/g, 'paidleaveinfoPC-popup');
      let vueForm = this.strToVueForm(file, '#paidLeaveInfoPC');
      this.myForm = vueForm;
      return Promise.resolve();
    }
  }
}

新建MyPaidLeaveInfo.vue文件

只需要定义一个容器包住就可以了

<template>
  <el-row>
    <el-header style="height: 30px" class="wfm-first-header"
      ><WFMBreadcrumb></WFMBreadcrumb
    ></el-header>
     <div id="paidLeaveInfoPC"></div>
  </el-row>
</template>
 
<script>
import MyPaidLeaveInfoJS from './MyPaidLeaveInfo.js';
export default MyPaidLeaveInfoJS;
</script>
 
<style lang="scss" scoped>
@import './MyPaidLeaveInfo.scss';
</style>