第一种基于vue实现
<template>
<div class="coordinate-container">
<span class="coord-item">
<span>N</span>
<input v-model.trim="coordinateArr.lat.degree"
@keyup.enter="onClickSearch"
ref="input1"
@keyup="nextFocus(1)"
:maxlength="2" :disabled="btnStatus">
<span>°</span>
<input v-model.trim="coordinateArr.lat.minute"
@keyup.enter="onClickSearch"
ref="input2"
@keyup="nextFocus(2)"
:maxlength="2" :disabled="btnStatus">
<span>′</span>
<input v-model.trim="coordinateArr.lat.sec"
@keyup.enter="onClickSearch"
ref="input3"
@keyup="nextFocus(3)"
:maxlength="2" :disabled="btnStatus">
<span>″</span>
</span>
<span class="coord-item">
<span>E</span>
<input v-model.trim="coordinateArr.lng.degree" class="long-item"
@keyup.enter="onClickSearch"
ref="input4"
@keyup="nextFocus(4)"
:maxlength="3" :disabled="btnStatus">
<span>°</span>
<input v-model.trim="coordinateArr.lng.minute"
@keyup.enter="onClickSearch"
ref="input5"
@keyup="nextFocus(5)"
:maxlength="2" :disabled="btnStatus">
<span>′</span>
<input v-model.trim="coordinateArr.lng.sec"
@keyup.enter="onClickSearch"
ref="input6"
@keyup="nextFocus(6)"
:maxlength="2" :disabled="btnStatus">
<span>″</span>
</span>
<span class="icon-item" @click="onClickClearPoint">
<span class="el-icon-close" v-show="showIcon"></span>
</span>
<span class="el-icon-search item-search" @click="onClickSearch"></span>
</div>
</template