Vue中如何引入远程JS文件?

本文和大家分享的主要是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 },
  },
  },
  },
  }
  使用方法:
  <remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>


来源:郭宇翔的博客
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值