龙马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方法解决

由于获取经纬度是异步的，有可能用户点击保存的时候，经纬度还没获取到或者还没更新，这时候如果直接保存，经纬度数据就不正确。
解决方案：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)

使用示例

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