基于elementUI使用v-model实现经纬度输入的vue组件

• 绑定一个 [12.34,-45.67] (东经西经，南纬北纬 正负表示) 形式的经纬度数组，能够按度分秒进行编辑，效果如下所示，点击东经，北纬可切换。
  
• 经纬度的 度转度分秒
  
• 能够获取度分秒格式数据  

Coordinates组件实现

模板

一个span显示东经西经，三个输入框输入度分秒

实现

props： 父组件传入的参数 value ，验证合法性 经度绝对值小于180，纬度绝对值小于90，数组长度为2

value: { //绑定的 value
 type: Array,
 require: true,
 validator: function (value) {
  let len = value.length > 0 && value.length === 2
  let isvalid = Math.abs(value[0]) < 180 && Math.abs(value[1]) < 90
  return len && isvalid
 },
 default: function () {
  return []
 }
}

model： prop为 value 时不用实现 model 但是this.$emit(event,arg) 传入的event需要为 'input',这里要注意

model: { 
 prop: 'value',
 event: 'input'
},

v-model实现： 使用this.$emit(event,arg)修改父组件的数据

returnBackFn () {
 let longitude = parseFloat(this.longFlag + this.Dms2D(this.longitude));
 let latitude = parseFloat(this.latFlag + this.Dms2D(this.latitude));
 let array = [longitude, latitude]
 this.$emit('input', array);
},

Coordinates组件完整代码

@color-border: #9e9e9e;
@height: 28px;
.coordinates {
 border: 1px solid @color-border;
 width: fit-content;
 display: inline-flex;
}
.item:nth-of-type(1) {
 border-right: 1px solid @color-border;
}
.el-input {
 width: 40px;
}
.itude {
 height: @height;
 line-height: @height;
 display: inline-block;
 padding-left: 5px;
 cursor: pointer;
 user-select: none;
}
i {
 font-size: 18px;
 color: gray;
}


.el-input__inner {
 text-align: center;
 border: none;
 border-radius: unset;
}
.el-input--suffix .el-input__inner {
 padding: 0;
}

测试代码 index.vue

#example {
 padding: 20px;
}
.el-button {
 margin: 20px;
}
span {
 font-size: 17px;
}

效果

修改子组件值 父组件的value会改变，修改父组件的value，子组件会自动修改， [change value] 按钮 可以修改value [refresh] 按钮 通过ref获取度分秒格式的经纬度

总结

以上所述是小编给大家介绍的基于elementUI使用v-model实现经纬度输入的vue组件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！