1、安装第三方依赖
npm install address-parse
2、在需要使用的页面引入
import AddressParse from 'address-parse';
3、在页面上写入静态的html代码,可以输入地址,加上识别的输入框;
<div class="auto_address">
<van-field class="auto_recognition" v-model="message" autosize type="textarea" placeholder="粘贴信息,自动拆分姓名、电话和地址" />
<van-button color="#17BF6A" @click="parseAddress">
识别
</van-button>
</div>
4、点击识别按钮,触发地址解析的方法,把返回结果一对一赋值。
parseAddress() {
/*判断解析的地址内容不为空*/
if (this.message != '') {
const result = AddressParse.parse(this.message);
this.name = result[0].name;
this.phone = result[0].mobile;
this.area = `${result[0].province}-${result[0].city}-${result[0].area}`
this.areaDetail = result[0].details;
} else {
this.$toast('请输入您要识别的地址')
}
}
5、效果展示。