龙马UI|龙马UI lm-ui-elementl lm-address地址组件
lm-ui-element 快速上手——安装使用
上一个组件:表单组件
使用地址组件,请确保在项目中引入高德地图,确保AMap实例正确初始化
可在入口html文件,即index.html中引入
示例:
如果使用vue-amap的则要在main.js中引入
示例:
import VueAMap from 'vue-amap';
// 高德地图
VueAMap.initAMapApiLoader({
key:'你的key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.DistrictSearch'],
v: '1.4.4',
uiVersion: '1.0.11', // 版本号
})
严格来说地址组件也属于表单组件,lm-address组件必须包含在element-ui的el-form组件内部,lm-address默认占一行的位置,所以通常情况下,你不需要在lm-address外面套上el-row,也没有span属性
需要做表单校验的,可以从'lm-ui-element/lib/utils/lm-validate-methods'引入validAddressInfo进行校验,校验rule规则同element-ui的表单校验。或者自定义校验方法。
lm-address支持表单状态(可编辑修改)和查看状态,不可见状态的切换,只需根据条件设置is-edit属性和disabled属性即可。
当你在页面中直接从编辑状态切换到查看状态时,地址显示数据可能不能正确更新,可以使用setFullAddress方法解决
【龙马UI|龙马UI lm-ui-elementl lm-address地址组件】由于获取经纬度是异步的,有可能用户点击保存的时候,经纬度还没获取到或者还没更新,这时候如果直接保存,经纬度数据就不正确。
解决方案:lm-address 提供了addressChange事件,你可以在使用的组件中声明变量来确定是否获取到了经纬度,默认false,当获取到经纬度后改为true,addressChange事件触发时,改为false,这样就可以确保用户提交后的经纬度数据为正确数据
基础用法
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
required | 是否必须 | Boolean | -- | true |
title | 标题 | String | -- | 选择地址 |
maxlength | 最大长度 | String / Number | -- | -- |
showStreet | 是否显示输入详情地址 | Boolean | -- | true |
defaultAddress | 默认地址 | Object | -- | -- |
isEdit | 是否为编辑状态 | Boolean | -- | true |
size | 尺寸 | String | -- | -- |
inputWidth | 详情地址输入框宽度 | Number / String | -- | 'auto' |
lmRef | 标志以及下一次跳转标志 | Array | -- | -- |
filterable | 省市区选择栏是否可搜索 | Boolean | -- | true |
elAuto | 是否选择el-autocomplete组件(用于自动搜索匹配的目标地址) | Boolean | -- | true |
valueKey | elAuto为true有效,el-autocomplete组件输入建议对象中用于显示的键名 | String | -- | name |
placement | elAuto为true有效,el-autocomplete组件菜单弹出位置 | String | -- | -- |
triggerOnFocus | elAuto为true有效,el-autocomplete组件是否在输入框 focus 时显示建议列表 | Boolean | -- | -- |
事件名 | 说明 | 回调参数 |
---|---|---|
addressChange | 地址发生变化 | (address:Object) |
getLngLatInfo | 获取经纬度 | ({lng:String,lat:String}:Object) |
方法名 | 说明 | 参数 |
---|---|---|
setFullAddress | 设置地址全名(用于查看状态下) | (address:String) |
{{isEdit ? '查看' : '编辑'}}
下一个组件:自定义弹窗组件
推荐阅读
- 《仁医》真善美佳作——配乐剧情以及表达价值观都很正义善良——看着南方大夫救治民众感觉有很感动地方啊——南方大夫很棒——笑姑娘也很棒——坂
- 龙马河畔
- 乱世王者|乱世王者 | 毒杀传说 | 风水祖师 | 杨公真迹系列之(龙马形)
- 教育增长圈-教育操盘手2期-龙马君-day1-自我定位