田大叔的博客

Vue项目引入远程js

2018-06-11

1.直接在dom上操作

1
2
3
4
5
6
7
8
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);
 },
}

2.封装一个组件 remote-js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//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 },
            },
        },
    },
}

//在别的组件中使用
import remoteJs from 'path/to/remote-js';
export default {
    mixins:[remoteJs]
}

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></remote-js>