vue 动态加载插件及插件样式 解决插件样式造成的全局污染问题

1 工具方法 

/**
 * 动态加载第三方js.css
 * @param {*} src 路径
 * @param {*} isCss 是否为css文件
 */
export function asynLoad(src, isCss = false) {
  return new Promise(res => {
    if (isCss) {
      let list = Array.from(document.documentElement.getElementsByTagName('link'));
      if(list.some(item => item.getAttribute('href') === src)) {
        res(true);
      }else {
        let el = document.createElement('link');
        el.rel ='stylesheet';
        el.href = src;
        appendEl(el);
      }
    } else {
      let list = Array.from(document.documentElement.getElementsByTagName('script'));
      if(list.some(item => item.getAttribute('src') === src)) {
        res(true);
      }else {
        let el = document.createElement('script');
        el.src = src;
        appendEl(el);
      }
    }
    function appendEl(el) {
      document.documentElement.appendChild(el);
      //判断加载状态
      el.onload = el.onreadystatechange = function () {
        if (
          !this.readyState ||
          this.readyState == 'loaded' ||
          this.readyState == 'complete'
        ) {
          res(true);
        }
        this.onload = this.onreadystatechange = null;
      };
    }
  });
}

/**
 * 动态移除第三方js.css
 * @param {*} src 路径
 * @param {*} isCss 是否为css文件
 */
export function asynRemove(src, isCss = false) {
  if (isCss) {
    const list = document.documentElement.getElementsByTagName('link');
    let el = Array.from(list).find(item => item.getAttribute('href') === src);
    el && el.parentNode.removeChild(el);
  } else {
    const list = document.documentElement.getElementsByTagName('script');
    let el = Array.from(list).find(item => item.getAttribute('src') === src);
    el && el.parentNode.removeChild(el);
  }
}

2 方法使用

onMounted(() => {
  data.loading = true;
  Promise.all([
    asynLoad("/luckysheet_dist/expendPlugins/chart/chartmix.css", true),
    asynLoad("/luckysheet_dist/plugins/css/pluginsCss.css", true),
    asynLoad("/luckysheet_dist/plugins/plugins.css", true),
    asynLoad("/luckysheet_dist/css/luckysheet.css", true),
    asynLoad("/luckysheet_dist/assets/iconfont/iconfont.css", true),
    asynLoad("/luckysheet_dist/plugins/js/plugin.js"),
    asynLoad("/luckysheet_dist/luckysheet.umd.js"),
  ]).then(() => {
    getDataById(route.query.id).then(res => {
      const { listFiles = [], ...dataObj } = res.data;
      data.dataObj = dataObj;
      if (route.query.type === '1') {
        data.fileList = [listFiles[0]];
        getExcelFile(listFiles[0]);
      }else {
        data.fileList = listFiles.slice(1, listFiles.length);
        getExcelFile(data.fileList[0]);
        data.activeFile = 0;
      }
    }).finally(() => {
      data.loading = false;
    })
  }).catch(() => {
    data.loading = false;
    proxy.$modal.msgError("文件加载失败！");
  })
})

3 插件移除

onUnmounted(() => {
  if(luckysheet) {
    luckysheet.exitEditMode()
    luckysheet.destroy();
  }
  nextTick(() => {
    asynRemove("/luckysheet_dist/plugins/plugins.css", true);
    asynRemove("/luckysheet_dist/expendPlugins/chart/chartmix.css", true);
    asynRemove("/luckysheet_dist/plugins/css/pluginsCss.css", true);
    asynRemove("/luckysheet_dist/css/luckysheet.css", true);
    asynRemove("/luckysheet_dist/assets/iconfont/iconfont.css", true);
    asynRemove("/luckysheet_dist/plugins/js/plugin.js");
    asynRemove("/luckysheet_dist/luckysheet.umd.js");
  })
})