如何在 Vue 元件中更好的引入一個第三方 JS

sevdot發表於2020-06-03
Vue元件JS

在使用 Vue 開發專案的時候經常會用到一些不錯的第三方庫，但是有一些庫並沒有提供 npm 安裝方式，沒法使用 import 的方式引入。比如 vaptcha 手勢驗證碼， vapthca 是一個使用比較多的第三方手勢驗證碼，但是官方文件沒有找到 npm 安裝的方式。

通常在使用這種第三方庫的時候會在在 index.html 檔案中引入第三方庫提供的 sdk。在 index.html 中引入 vaptcha 是全域性使用，會應用到任何元件中，但是實際僅僅會在登入介面（ login.vue ）使用到 vapthca 。儘管 vaptcha 足夠小，對頁面載入影響小，但是請不要全域性引入。

使用一個小技巧就可以實現按需應用，可以建立一個 vaptcha.js ，加入以下程式碼：

export function vaptcha () {
  return new Promise(function (resolve, reject) {
    const tag = document.getElementsByTagName('script')
    for (let i of tag) {
      if (i.src === 'https://v.vaptcha.com/v3.js') {
        resolve(window.vaptcha)
        return
      }
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://v.vaptcha.com/v3.js'
    script.onerror = reject
    document.body.appendChild(script)
    script.onload = () => {
      resolve(window.vaptcha)
    }
  })
}

然後在 login.vue 中使用 import 引入：

import { vaptcha } from '~/extend/vaptcha'

在 initVaptcha 方法中使用

initVaptcha () {
  vaptcha().then((vaptcha) => {
    vaptcha({
      vid: 'xxxx', // 驗證單元id
      type: 'invisible', // 顯示型別 點選式
      scene: 1, // 場景值 預設0
      offline_server: 'xxxxx', // 離線模式服務端地址
      container: '#vaptcha-container' // 容器，可為Element 或者 selector
    }).then((obj) => {
      //
    })
  })
}

這樣就僅會在 login.vue 中載入 vapthca.js ，而不會全域性引入。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章