Vue如何引入远程JS文件


Posted in Javascript onApril 20, 2017

问题

最近在使用 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 有什么问题欢迎大家指出,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
对javascript继承的理解
Oct 11 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
Angular.JS中的this指向详解
May 17 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
You might like
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
用javascript操作xml
2006/11/04 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python 3 判断2个字典相同
2019/08/06 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
销售业务员岗位职责
2014/01/29 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
行政介绍信范文
2015/05/04 职场文书