批量设置css,js - 前端笔记-utils/seticon.ts // 字体图标 url const cssCdnUrlList: Array string = [ '//at.ali...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>批量设置css,js - 前端笔记


utils/seticon.ts
// 字体图标 url
const cssCdnUrlList: Array<string> = [
  '//at.alicdn.com/t/font_2298093_y6u00apwst.css',
  '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
];
// 第三方 js url
const jsCdnUrlList: Array<string> = [];

// 动态批量设置字体图标
export function setCssCdn() {
  if (cssCdnUrlList.length <= 0) return false;
  cssCdnUrlList.map((v) => {
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = v;
    link.crossOrigin = 'anonymous';
    document.getElementsByTagName('head')[0].appendChild(link);
  });
}

// 动态批量设置第三方js
export function setJsCdn() {
  if (jsCdnUrlList.length <= 0) return false;
  jsCdnUrlList.map((v) => {
    let link = document.createElement('script');
    link.src = v;
    document.body.appendChild(link);
  });
}

/**
 * 批量设置字体图标、动态js
 * @method cssCdn 动态批量设置字体图标
 * @method jsCdn 动态批量设置第三方js
 */
const setIntroduction = {
  // 设置css
  cssCdn: () => {
    setCssCdn();
  },
  // 设置js
  jsCdn: () => {
    setJsCdn();
  },
};

// 导出函数方法
export default setIntroduction;



app.vue
import setIntroduction from '/@/utils/setIconFont'


// 设置初始化,防止刷新时恢复默认
onBeforeMount(() => {
  // 设置批量第三方 icon 图标
  setIntroduction.cssCdn();
  // 设置批量第三方 js
  setIntroduction.jsCdn();
});







×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » 批量设置css,js

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)