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

功能描述

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

Coordinates组件实现

• 模板

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

<template>
  <div class="coordinates">
    <!-- 经度 -->
    <div class="item">
      <span class="itude"
            @click="itudeChange(true)">{
   { longFlag | longitudeName }}</span>
      <el-input v-model="longitude[0]"
                @change="change(true,0)"
                size="mini">
        <i slot="suffix">°</i>
      </el-input>
      <el-input v-modelumber="longitude[1]"
                @change="change(true,1)"
                size="mini">
        <i slot="suffix">′</i>
      </el-input>
      <el-input v-model="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="latitude[0]"
                @change="change(false,0)"
                size="mini">
        <i slot="suffix">°</i>
      </el-input>
      <el-input v-model="latitude[1]"
                @change="change(false,1)"
                size="mini">
        <i slot="suffix">′</i>
      </el-input>
      <el-input v-model="latitude[2]"
                @change="change(false,2)"
                size="mini">
        <i slot="suffix">″</i>
      </el-input>
    </div>
  </div>
</template>
复制代码

• 实现

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

value: { //绑定的 value
  type: Array,
  require: true,
  validator: function (value) {