Vue引入遠程JS文件

問題

最近在使用 Vue 作東西，用到釘釘掃描登陸的功能，這裏須要引入遠程的 js 文件，由於 Vue 的方式跟以前的不太同樣，又不想把文件下載到本地應用，找了一下解決的方法，貌似都須要引入第三方的庫，最後找到了解決方案，分享之。

思路

一開始的思路是在 Vue 加載完 Dom 以後（mounted），使用 JavaScript 腳本在 body 中插入遠程的腳本文件。

後來發現了 Vue 的 createElement 方法，簡單的封裝一個組件解決問題。

解決方法

初版代碼（直接在操做 Dom ）以下：

export default {
  mounted() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
    document.body.appendChild(s);
  },
}

使用 createElement 方法：

export default {
  components: {
    'dingtalk': {
      render(createElement) {
        return createElement(
          'script',
          {
            attrs: {
              type: 'text/javascript',
              src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
            },
          },
        );
      },
    },
  },
}
 
// 使用 <dingtalk></dingtalk> 在頁面中調用

終極方案

經過封裝一個組件 remote-js 實現：

export default {
  components: {
   'remote-js': {
    render(createElement) {
      return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
    },
    props: {
      src: { type: String, required: true },
    },
  },
  },
}

使用方法：

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></remote-js>

由於剛開始學習 Vue 有什麼問題歡迎你們指出，你們一塊兒討論討論。

參考資料

• Vue - Render Functions