vue中获取外网IP的方法
【摘要】
记一下如何在vue项目中获取外网IP
之前有篇文章js获取客户端真实IP记录了如何获取外网IP 那个只是在普通html页面当中的获取方法，在vue项目中就不能这么使用了。
这里介绍一种适用于vue项目的公网IP获取方法 1.components公共组件目录下新建组件outerNetIp.vue用于获取IP
<template> <re...
记一下如何在vue项目中获取外网IP
之前有篇文章js获取客户端真实IP记录了如何获取外网IP
那个只是在普通html页面当中的获取方法，在vue项目中就不能这么使用了。
这里介绍一种适用于vue项目的公网IP获取方法
1.components公共组件目录下新建组件outerNetIp.vue用于获取IP
-
<template>
-
<remote-js :src="src"></remote-js>
-
</template>
-
<script>
-
export default {
-
name: 'OuterIp',
-
data() {
-
return {
-
src: ''
-
}
-
},
-
components: {
-
'remote-js': {
-
render(createElement) {
-
return createElement('script', {
-
attrs: { type: 'text/javascript', src: this.src || 'http://pv.sohu.com/cityjson?ie=utf-8' }
-
})
-
},
-
props: {
-
src: { type: String, required: true }
-
}
-
}
-
}
-
}
-
</script>
2.页面vue文件中引用组件
-
<template>
-
<div>
-
...
-
<outer-ip :src="ipUrl"></outer-ip>
-
...
-
</div>
-
</template>
-
-
<script>
-
import outerIp from '@/components/outerNetIp.vue'
-
-
export default {
-
...
-
components: {
-
outerIp
-
},
-
...
-
}
-
</script>
3.methods方法中获取IP即可
-
...
-
methods: {
-
onClick() {
-
let ip = returnCitySN['cip']
-
}
-
}
-
...
以上。
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244347
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）