Vue引入远程JS文件的方法
这篇文章给大家分享的是有关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', }, }, ); }, }, }, } // 使用在页面中调用
终极方案
通过封装一个组件 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 }, }, }, }, }
使用方法:
感谢各位的阅读!关于“Vue引入远程JS文件的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文题目:Vue引入远程JS文件的方法
路径分享:http://myzitong.com/article/ieesjo.html