动态加载css

css文件加载

function addLinkTag (url, fn, fail) {
  var link = document.createElement('link')
  link.href = url
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('media', 'all')
  link.setAttribute('type', 'text/css')
  link.onload = fn
  link.onerror = fail
  ;(document.head).appendChild(link)
}

js加载

function addScriptTag (url, fn, fail) {
  var script = document.createElement('script')
  script.src = url
  script.async = true
  script.onload = fn
  script.onerror = fail
  ;(document.body || document.head).appendChild(script)
}

调用以上方法

export function loadJs (url = '', type = 'css') {
  if (!url) return Promise.reject(new Error('url不存在'))
  return new Promise((resolve, reject) => {
    const funType = type === 'css' ? addLinkTag : addScriptTag
    funType(
      url,
      () => {
        resolve()
      },
      () => {
        console.error(`${url} 加载失败`)
        reject(new Error(`${url} 加载失败`))
      }
    )
  })
}

页面调用

loadJs(this.cssUrl, 'css').then(() => {
        this.showQrcode = true
      }).catch(() => {
        // 加载指定的文件失败后，加载默认的样式文件
        this.cssUrl = 'xxx/css/follow-theme.css'
        loadJs(this.cssUrl, 'css').catch(() => {
          console.log('【关注默认样式】未设置默认样式', this.cssUrl)
        }).finally(() => {
          // do something
        })
      })