Vue项目中实现地址信息的智能解析

一：需求描述

在添加收货地址时，为了方便代理下单（因为代理都是下各种不同地址的订单，输入地址的时候，是否可以直接复制粘贴 整个，智能识别，或者  直接读取粘贴的内容）

二: 具体实现

经过研究和查资料，在GitHub上知道一个开源的项目,实现国内地址地区智能解析,无需完整地址也能正确匹配

接下来介绍下我的具体实现

• install

  cd  你的项目的目录下
  
  npm 安装 开发时依赖
  npm install address-pares --save 
  

  start

  import 引入地址解析实例
  import AddressParse from 'address-parse';
  

  在data中定义属性用来接收用户填入的地址信息
  

  data(){
  	return{
  		AddressInfo:{},  //解析获得地址信息
  		message:''       //接受用户输入的地址信息
  	}
  }
  

  前端页面的显示,这里使用的是vant组件
  

  	 <!--智能解析框-->
        <div class="addressBox">
            <van-cell-group>
                <van-field
                        v-model="message"
                        rows="4"
                        border
                        label-align="center"
                        autosize
                        type="textarea"
                        maxlength="180"
                        placeholder="智能解析：粘贴或者输入整段文字，自动识别姓名、号码、地址，如：段佳佳13112345678浙江省杭州市西湖区某某路某某某大厦001号"
                        show-word-limit
                />
            </van-cell-group>
            <div class="parse-btn">
                <van-button style="background-color: #f6f6f6;margin-right: 20px;border:none;"  plain size="small" @click="clean">清空</van-button>
                <van-button round type="info" size="small" color="red" @click="parseAddress">智能解析</van-button>
            </div>
  
        </div>
  

  	前端页面如下图所示
  

  methods中实现方法
  

   clean(){
      this.message = ''
        console.log(this.message)
    } ,
    parseAddress(){
      console.log(this.message)
        /*判断解析的地址内容不为空*/
        if(this.message != ''){
            const result = AddressParse.parse(this.message);
            console.log(result);
            console.log(result[0].province);
            console.log(result[0].city);
            console.log(result[0].area);
            console.log(result[0].details);
            console.log(result[0].mobile);
            console.log(result[0].code);
            this.AddressInfo = {
  
                'name':result[0].name,
                'tel':result[0].mobile,
                'province':result[0].province,
                'city':result[0].city,
                'county':result[0].area,
                'addressDetail':result[0].details,
                'areaCode':result[0].code,
                'postalCode':result[0].zip_code,
            }
        }else {
            console.log('请输入你要解析的地址')
            Toast.fail('请输入您要解析的地址信息');
        }
  
  }
  

  以上操作,就会将用户输入的例如:段佳佳13112345678浙江省杭州市西湖区某某路某某某大厦001号,解析成你要的字段,将其放到对应的输入框保存即可。
  这里附上GitHub地址https://github.com/akebe/address-parse 刚开始写,大家给个赞,我就更有动力了.