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 剛開始寫,大家給個贊,我就更有動力了.