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

<template> <div class="coordinates">  <!-- 经度 -->  <div class="item">   <span class="itude"      @click="itudeChange(true)">{{ longFlag | longitudeName }}</span>   <el-input v-model.number="longitude[0]"        @change="change(true,0)"        size="mini">    <i slot="suffix">°</i>   </el-input>   <el-input v-model.number="longitude[1]"        @change="change(true,1)"        size="mini">    <i slot="suffix">′</i>   </el-input>   <el-input v-model.number="longitude[2]"        @change="change(true,2)"        size="mini">    <i slot="suffix">″</i>   </el-input>  </div>  <!-- 纬度 -->  <div class="item">   <span class="itude"      @click="itudeChange(false)">{{ latFlag | latitudeName }}</span>   <el-input v-model.number="latitude[0]"        @change="change(false,0)"        size="mini">    <i slot="suffix">°</i>   </el-input>   <el-input v-model.number="latitude[1]"        @change="change(false,1)"        size="mini">    <i slot="suffix">′</i>   </el-input>   <el-input v-model.number="latitude[2]"        @change="change(false,2)"        size="mini">    <i slot="suffix">″</i>   </el-input>  </div> </div></template>

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', event: 'input'},

/** * 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);},

<template> <div class="coordinates">  <!-- 经度 -->  <div class="item">   <span class="itude"      @click="itudeChange(true)">{{ longFlag | longitudeName }}</span>   <el-input v-model.number="longitude[0]"        @change="change(true,0)"        size="mini">    <i slot="suffix">°</i>   </el-input>   <el-input v-model.number="longitude[1]"        @change="change(true,1)"        size="mini">    <i slot="suffix">′</i>   </el-input>   <el-input v-model.number="longitude[2]"        @change="change(true,2)"        size="mini">    <i slot="suffix">″</i>   </el-input>  </div>  <!-- 纬度 -->  <div class="item">   <span class="itude"      @click="itudeChange(false)">{{ latFlag | latitudeName }}</span>   <el-input v-model.number="latitude[0]"        @change="change(false,0)"        size="mini">    <i slot="suffix">°</i>   </el-input>   <el-input v-model.number="latitude[1]"        @change="change(false,1)"        size="mini">    <i slot="suffix">′</i>   </el-input>   <el-input v-model.number="latitude[2]"        @change="change(false,2)"        size="mini">    <i slot="suffix">″</i>   </el-input>  </div> </div></template><script>require('math')export default { name: 'Coordinates', props: {  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' //  prop: 'value', //  event: 'returnBack' // }, data () {  return {   longitude: [], // 经度   latitude: [],  // 纬度   longFlag: '+', //表示东经西经   latFlag: '+',  //表示南纬北纬  } }, created: function () {  this.initData(); }, filters: {  longitudeName (value) {   return value === '+' ? "东经" : "西经"  },  latitudeName (value) {   return value === '+' ? "南纬" : "北纬"  } }, watch: {  /**  * 监测父组件绑定的value  */  value () {   this.initData();  } }, computed: {  // 转换为  东经 XXX°XX′XX″  格式   // 返回一个经纬度的数组  formatString () {   let longitude = (this.longFlag === '+' ? "东经 " : "西经 ") + this.longitude[0] + '°' + this.longitude[1] + '′' + this.longitude[2] + '″';   let latitude = (this.latFlag === '+' ? "南纬 " : "北纬 ") + this.latitude[0] + '°' + this.latitude[1] + '′' + this.latitude[2] + '″';   return [longitude, latitude]  } }, methods: {  /**   * 东经西经，南纬北纬 change事件   */  itudeChange (flag) {   flag ? (this.longFlag = (this.longFlag === '+' ? '-' : '+')) : (this.latFlag = (this.latFlag === '+' ? '-' : '+'))   this.returnBackFn()  },  /**   * 初始化数据，父组件修改绑定的value时调用   */  initData () {   this.longitude = this.D2Dms(Math.abs(this.value[0]));   this.latitude = this.D2Dms(Math.abs(this.value[1]));   this.longFlag = this.value[0] < 0 ? '-' : '+'   this.latFlag = this.value[1] < 0 ? '-' : '+'  },  /**   * 输入框change事件，数据合法性验证   */  change (flag, index) {   let name = '', max = 0   flag ? [name, max] = ['longitude', 179] : [name, max] = ['latitude', 89]   index ? max = 59 : null   let value = parseInt(this[name][index], 10)   if (isNaN(value)) {    value = 0;   }   value = value < 0 ? 0 : value   value = value > max ? max : value   this.$set(this[name], index, value)   this.returnBackFn()  },  /**   * 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);  },  /**  * 度转度分秒  */  D2Dms (d_data = 0) {   var degree = parseInt(d_data);   var min = parseInt((d_data - degree) * 60);   var sec = parseInt((d_data - degree) * 3600 - min * 60);   return [degree, min, sec];  },  /**  * 度分秒转度  */  Dms2D (dms_data = [0, 0, 0]) {   let d = parseFloat(dms_data[0]);   let m = parseFloat(dms_data[1]);   let s = parseFloat(dms_data[2]);   return this.keepFourDecimal(d + m / 60 + s / 60 / 60);  },  /**  * 保留四位小数，小于四位精度可能丢失  */  keepFourDecimal (num) {   var result = parseFloat(num);   if (isNaN(result)) {    return 0;   }   result = Math.round(num * 10000) / 10000;   return result;  } },}</script><style lang="less" scoped>@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;}</style><style lang="less">.el-input__inner { text-align: center; border: none; border-radius: unset;}.el-input--suffix .el-input__inner { padding: 0;}</style>

<template> <div id="example">  <Coordinates ref="coordinates"         v-model="value"></Coordinates>  <el-button @click="changeValue"        type="primary">   change value  </el-button>  <br>  <span>value：{{value.toString()}}</span>  <br>  <span>度分秒格式：{{formatString.toString()}}</span>  <el-button @click="refresh"        type="primary">   refresh  </el-button> </div></template><script>import Coordinates from '@/components/Coordinates'export default { name: 'index', components: {  Coordinates }, data () {  return {   value: [12.34, -45.67],   formatString: []  } }, mounted () {  this.refresh () }, methods: {  changeValue () {   this.$set(this.value, 0, (this.value[0] + 2) >= 180 ? 0 : (this.value[0] + 2))   this.$set(this.value, 1, (this.value[1] + 2) >= 90 ? 0 : (this.value[1] + 2))   setTimeout(() => {    refresh ()   }, 10);  },  refresh () {   // 获取度分秒格式   this.formatString = this.$refs.coordinates.formatString  } }}</script><style lang="less" scoped>#example { padding: 20px;}.el-button { margin: 20px;}span { font-size: 17px;}</style>