zoukankan      html  css  js  c++  java
  • 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',
                },
              },
            );
          },
        },
      },
    }
     
    // 使用 <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 有什么问题欢迎大家指出,大家一起讨论讨论。

    参考资料

  • 相关阅读:
    康复计划
    Leetcode 08.02 迷路的机器人 缓存加回溯
    Leetcode 38 外观数列
    Leetcode 801 使序列递增的最小交换次数
    Leetcode 1143 最长公共子序列
    Leetcode 11 盛水最多的容器 贪心算法
    Leetcode 1186 删除一次得到子数组最大和
    Leetcode 300 最长上升子序列
    Leetcode95 不同的二叉搜索树II 精致的分治
    Leetcode 1367 二叉树中的列表 DFS
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/10974156.html
Copyright © 2011-2022 走看看