Vue如何引入遠(yuǎn)程JS文件
更新時(shí)間：2017年04月20日 09:47:32 作者：董董董董董董董董董大笨蛋
本篇文章主要介紹了Vue引入遠(yuǎn)程JS文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
問題
最近在使用 Vue 做東西，用到釘釘掃描登錄的功能，這里需要引入遠(yuǎn)程的 js 文件，因?yàn)?Vue 的方式跟之前的不太一樣，又不想把文件下載到本地應(yīng)用，找了一下解決的方法，貌似都需要引入第三方的庫，最后找到了解決方案，分享之。
思路
一開始的思路是在 Vue 加載完 Dom 之后（mounted），使用 JavaScript 腳本在 body 中插入遠(yuǎn)程的腳本文件。
后來發(fā)現(xiàn)了 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> 在頁面中調(diào)用
終極方案
通過封裝一個組件 remote-js 實(shí)現(xiàn)：
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>
因?yàn)閯傞_始學(xué)習(xí) Vue 有什么問題歡迎大家指出，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue應(yīng)用中使用xlsx庫實(shí)現(xiàn)Excel文件導(dǎo)出的詳細(xì)步驟
本文詳細(xì)介紹了如何在Vue應(yīng)用中使用xlsx庫來導(dǎo)出Excel文件,包括安裝xlsx庫、準(zhǔn)備數(shù)據(jù)、創(chuàng)建導(dǎo)出方法、觸發(fā)導(dǎo)出操作和自定義Excel文件等步驟,xlsx庫提供了強(qiáng)大的API和靈活的自定義選項(xiàng),使得處理Excel文件變得簡單而高效2024-10-10
@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式
最近在升級vue/cli的具有了一些問題,解決問題的過程也花費(fèi)了些時(shí)間,所以下面這篇文章主要給大家介紹了關(guān)于@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式,需要的朋友可以參考下2022-09-09
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
最近的數(shù)據(jù)統(tǒng)計(jì)項(xiàng)目中要用到中國地圖，也就是在地圖上動態(tài)的顯示某個時(shí)間段某個省份地區(qū)的統(tǒng)計(jì)數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。本文就給大家介紹了關(guān)于利用vue集成raphael.js中國地圖的相關(guān)資料，需要的朋友可以參考下。2017-08-08
這篇文章介紹了vue實(shí)現(xiàn)消息無縫滾動效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本文通過實(shí)例代碼給大家介紹了vue 2.x 中axios 封裝的get 和post方法，非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02
本文主要介紹了vue3 ref 和reactive的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
這篇文章主要介紹了vuejs 切換導(dǎo)航條高亮路由高亮的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue使用axios獲取不到響應(yīng)頭Content-Disposition的問題及解決
這篇文章主要介紹了vue使用axios獲取不到響應(yīng)頭Content-Disposition的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06