龙马UI lm-ui-elementl lm-address地址

lm-ui-element 快速上手——安装使用

上一个组件：表单组件

使用地址组件，请确保在项目中引入高德地图，确保AMap实例正确初始化
可在入口html文件，即index.html中引入
示例：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>

如果使用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，这样就可以确保用户提交后的经纬度数据为正确数据

基础用法

<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <lm-address v-model="form.address"/>
    </el-form>
</template>
<script>
import {validAddressInfo} from 'lm-ui-element/lib/utils/lm-validate-methods'
export default {
    data(){
        return {
            form:{},//表单
             rules: {
                address:[{validator:validAddressInfo,trigger:['blur']}],                                          
              },
        }
    }
}
</script>

Attributes

Events

Methods

使用示例

<template>
    <div>
         <el-button @click="isEdit=!isEdit">{{isEdit ? '查看' : '编辑'}}</div>
         <el-form ref="form" :rules="rules" :model="form" label-width="120px">
              <lm-address 
              v-model="form.companyAddress" 
              :is-edit="isEdit" 
               ref="address" 
               @getLngLatFun="getLngLatInfo"
               title="公司地址："
               input-width="300px"
               address-prop="companyAddress" 
               @addressChange="isGetLonLat=false"
               />
          </el-form>
          <div>
            <el-button @click="cancel"></el-button>
            <el-button type="primary" @click="save"></el-button>           
         </div>
    </div>
   
</template>
<script>
import {validAddressInfo} from 'lm-ui-element/lib/utils/lm-validate-methods'
import axios from 'axios'
export default {
    data(){
        return {
            form:{},//表单
             rules: {
                    companyAddress:[{validator:validAddressInfo,trigger:['blur']}],
              },
              isEdit:false,//是否编辑
              lngLatInfo:{},//经纬度信息
              isGetLonLat:false,//是否获取到经纬度
        }
    },
    methods:{
        //获取经纬度
       getLngLatInfo(lngLatInfo){
            this.lngLatInfo=lngLatInfo
            // 获取到了经纬度后将isGetLonLat设为true
            this.isGetLonLat=true
        },
        //保存
        async save(){
              await this.$refs.form.validate()
              let {lngLatInfo,form,isGetLonLat}=this
              if(!isGetLonLat){
                  //确保已经获取到了经纬度或者经纬度数据已经更新
                  this.$message.warning('正在努力获取经纬度，请稍后再试！')
              }
              let {msg,code}=await axios({
                  url:'/save',
                  data:{
                      ...form,
                      ...lngLatInfo
                  },
                  method:'POST'
              })
              this.isEdit=false
              console.log(code+msg)
              if(code===1){
                  //成功
                  this.$refs.address.setFullAddress(form.addressArea.join(' '))
              }
              
        }
        
    }
}
</script>

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