大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
为休宁县等地区用户提供了全套网页设计制作服务,及休宁县网站建设行业解决方案。主营业务为成都网站建设、成都做网站、休宁县网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
Coordinates组件实现
模板
一个span显示东经西经,三个输入框输入度分秒
{{ longFlag | longitudeName }}° ′ ″ {{ latFlag | latitudeName }}° ′ ″
实现
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)修改父组件的数据
/** * 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组件完整代码
{{ longFlag | longitudeName }}° ′ ″ {{ latFlag | latitudeName }}° ′ ″
测试代码 index.vue
change value
value:{{value.toString()}}
度分秒格式:{{formatString.toString()}}refresh
效果
修改子组件值 父组件的value会改变,修改父组件的value,子组件会自动修改, [change value] 按钮 可以修改value [refresh] 按钮 通过ref获取度分秒格式的经纬度
总结
以上所述是小编给大家介绍的基于elementUI使用v-model实现经纬度输入的vue组件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!