一:需求描述
在添加收货地址时,为了方便代理下单(因为代理都是下各种不同地址的订单,输入地址的时候,是否可以直接复制粘贴 整个,智能识别,或者 直接读取粘贴的内容)
二: 具体实现
经过研究和查资料,在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 刚开始写,大家给个赞,我就更有动力了.