vue中获取外网IP的方法

举报
薛定喵君 发表于 2021/06/04 00:12:36 2021/06/04
【摘要】 记一下如何在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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。