这篇文章主要介绍了基于elementUI使用v-model实现经纬度输入的vue组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
- 绑定一个 [12.34,-45.67] (东经西经，南纬北纬 正负表示) 形式的经纬度数组，能够按度分秒进行编辑，效果如下所示，点击东经，北纬可切换。
- 经纬度的 度转度分秒
- 能够获取度分秒格式数据
Coordinates组件实现
模板
一个span显示东经西经，三个输入框输入度分秒
<div class="coordinates"> <!-- 经度 --><div class="item"> <span class="itude">{{ longFlag | longitudeName }}</span> <i>°</i> <i>′</i> <i>″</i></div><!-- 纬度 --><div class="item"> <span class="itude">{{ latFlag | latitudeName }}</span> <i>°</i> <i>′</i> <i>″</i></div></div>
实现
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 <span>本文来源gaodai#ma#com搞*!代#%^码网5</span>() { [] } }<pre></div><p>model： prop为 value 时不用实现 model 但是this.$emit(event,arg) 传入的event需要为 'input',这里要注意</p><div class="gaodaimacode"><pre class="prettyprint linenums"> model: { prop: 'value', event: 'input' },
v-model实现： 使用this.$emit(event,arg)修改父组件的数据
/** * v-model 绑定事件 双向绑定实现 */ 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组件完整代码
<div class="coordinates"> <!-- 经度 --><div class="item"> <span class="itude">{{ longFlag | longitudeName }}</span> <i>°</i> <i>′</i> <i>″</i></div><!-- 纬度 --><div class="item"> <span class="itude">{{ latFlag | latitudeName }}</span> <i>°</i> <i>′</i> <i>″</i></div></div> @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
<div id="example"> change value <br><span>value：{{value.toString()}}</span><br><span>度分秒格式：{{formatString.toString()}}</span> refresh </div> #example { padding: 20px; } .el-button { margin: 20px; } span { font-size: 17px; }
效果
修改子组件值 父组件的value会改变，修改父组件的value，子组件会自动修改， [change value] 按钮 可以修改value [refresh] 按钮 通过ref获取度分秒格式的经纬度
总结
以上所述是小编给大家介绍的基于elementUI使用v-model实现经纬度输入的vue组件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
以上就是基于elementUI使用v-model实现经纬度输入的vue组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于elementUI使用v-model实现经纬度输入的vue组件
转载请注明原文链接：基于elementUI使用v-model实现经纬度输入的vue组件
