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 相关文章推荐
js导出格式化的excel 实例方法
Jul 17 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
通过说明与示例了解js五种设计模式
Jun 17 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 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 删除记录实现代码
2009/03/12 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
js自定义事件代码说明
2011/01/31 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
对numpy中shape的深入理解
2018/06/15 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
深入了解python中元类的相关知识
2019/08/29 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
毕业生自我推荐
2013/11/04 职场文书
个人简历自我评价范文
2014/02/04 职场文书
环保建议书
2014/03/12 职场文书
1亿有多大教学反思
2014/05/01 职场文书
大学生求职信例文
2014/06/29 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2015年植树节活动总结
2015/02/06 职场文书
紧急通知
2015/04/17 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL