更新记录
1.0.1(2024-07-22) 下载此版本
修改 bug
1.0.0(2024-04-28) 下载此版本
1.0.01(2024-04-28)
20240428
README.md
智能地址识别组件
智能地址识别组件是一款专为 Uni-app 平台设计的 uni_modules
插件,旨在帮助开发者从用户输入中快速提取关键地址信息,如姓名、手机号和详细地址。此组件可以直接从插件市场添加至项目,无需通过 npm 安装。
功能特性
- 自动识别地址信息:用户可以粘贴或输入地址信息,组件将自动识别并解析出姓名、手机号和详细地址等信息。
- 灵活的数据绑定:支持
v-model
双向数据绑定,实时获取用户输入。 - 样式自定义:支持通过
mcolor
属性自定义组件主题颜色,以匹配不同的应用风格。
使用方法
-
从插件市场导入
- 直接在 DCloud 插件市场中搜索“智能地址识别组件”,按提示添加至项目。(如插件市场引入本组件符合 uniapp 组件规范,可以不用进行组件引用直接跳到模板中使用步骤
-
组件引用
- 在页面的
script
部分导入组件,并注册:
- 在页面的
import gAddresParse from '@/components/g-addres-parse/g-addres-parse.vue'
export default {
components: {
gAddresParse
}
}
-
模板中使用
- 在
template
中添加组件标签,并通过v-model
绑定需要解析的地址字符串。
<template> <view> <g-addres-parse :form.sync="form" :addres.sync="value" mcolor="#65b787"></g-addres-parse> </view> </template>
- 在
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | "" | 绑定的地址输入值 |
form | Object | {} | 存储解析后的地址信息 |
mcolor | String | "" | 主题颜色,用于自定义按钮和边框等 |
事件
- input:当输入框内容变化时触发。
- change:当输入框内容被提交时触发。
- update:addres:当地址识别成功后触发,返回组合后的地址字符串。
- update:form:当地址识别成功后触发,返回更新后的完整表单对象。
方法
- intelli:执行地址解析操作。
- valueChange:处理输入框值变化。
- inputText:处理输入框的输入事件。
- blurText:处理输入框的失焦事件。
- focusText:处理输入框的获焦事件。
样式说明
- .box:组件的外部容器,设置了基本的尺寸和背景色。
- .inner_box:内部容器,用于布局标签和输入区域。
- .label、.inputBox、.textBox、.btn:具体元素的样式,可根据需要自定义。
开源协议
本组件遵循 MIT 许可证。
支持的地址格式示例
以下示例展示了组件能够识别的各类地址格式。这些示例均使用虚构的信息,以展示如何正确格式化输入数据以利用组件功能:
-
详尽的地址信息:
四川省成都市武侯区天府广场12号天府大厦, 张红梅,13945678901
-
省市区及地标信息:
赵子龙,辽宁省沈阳市和平区北站路5号沈阳站 13812345678
-
省市区及邮编信息:
辽宁省沈阳市和平区北站路沈阳站110001 孙小美 13812345678
-
市区地标及邮编信息:
沈阳市和平区北站路沈阳站110001 孙小美 13812345678
-
区地标及邮编信息:
和平区北站路沈阳站110001 孙小美 13812345678
-
详细的联系信息格式:
-
收货人: 周杰伦 手机号码: 13800138000 所在地区: 湖北省武汉市江汉区解放公园路 详细地址: 解放公园主门旁
-
-
完整的地址与联系方式:
-
收货人: 李小龙 手机号码: 139-1234-5678 详细地址: 广东省广州市越秀区中山六路88号金光华广场1号楼802室
-
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |