龙马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 -- --
Events
事件名 说明 回调参数
addressChange 地址发生变化 (address:Object)
getLngLatInfo 获取经纬度 ({lng:String,lat:String}:Object)
Methods
方法名 说明 参数
setFullAddress 设置地址全名(用于查看状态下) (address:String)
使用示例

下一个组件:自定义弹窗组件

    推荐阅读