99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Vue引入遠(yuǎn)程JS文件

發(fā)布時間：2017-02-17 11:00  回復(fù):0  查看:4236   最后回復(fù)：2017-02-17 11:00  
問題
　　最近在使用 Vue  做東西，用到釘釘掃描登錄的功能，這里需要引入遠(yuǎn)程的  js  文件，因?yàn)?nbsp; Vue  的方式跟之前的不太一樣，又不想把文件下載到本地應(yīng)用，找了一下解決的方法，貌似都需要引入第三方的庫，最后找到了解決方案，分享之，希望對大家 學(xué)習(xí)Vue 有所幫助 。
　　 思路
　　一開始的思路是在 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',
　　},
　　},
　　);
　　},
　　},
　　},
　　}
　　//  使用在頁面中調(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  有什么問題歡迎大家指出，大家一起討論討論。

來源： 郭宇翔的博客
您還未登錄，請先登錄

熱門帖子

最新帖子

?