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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JS实现页面侧边栏效果探究
Jan 08 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
详解python中的index函数用法
2019/08/06 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python logging模块的使用
2020/09/07 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
旷课检讨书2000字
2014/01/14 职场文书
森林防火工作方案
2014/02/14 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
初中班主任教育随笔
2015/08/15 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
DE1107机评
2022/04/05 无线电