85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<template>
|
||
<div class="longitude-input">
|
||
<a-select v-model="lonSelect" style="width: 76px; margin-right: 20px">
|
||
<a-select-option :value="1">东经</a-select-option>
|
||
<a-select-option :value="-1">西经</a-select-option>
|
||
</a-select>
|
||
<a-input-number v-model="lonNumber" :min="0" :max="180" :precision="8" style="width: 152px" />
|
||
<span style="margin: 0 8px">°</span>
|
||
<span style="margin: 0 12px">或</span>
|
||
<a-input-number v-model="lonDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
|
||
<span style="margin: 0 8px">°</span>
|
||
<a-input-number v-model="lonMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
|
||
<span style="margin: 0 8px">′</span>
|
||
<a-input-number v-model="lonSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
|
||
<span style="margin: 0 8px">″</span>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
value: { type: Number, required: true },
|
||
},
|
||
data() {
|
||
return {
|
||
EWSelect: 1,
|
||
}
|
||
},
|
||
computed: {
|
||
lonSelect: {
|
||
get() {
|
||
return this.value ? this.value / this.lonNumber : this.EWSelect
|
||
},
|
||
set(v) {
|
||
this.$emit('input', this.lonNumber * v)
|
||
this.EWSelect = v
|
||
},
|
||
},
|
||
lonNumber: {
|
||
get() {
|
||
return Math.abs(this.value) || 0
|
||
},
|
||
set(v) {
|
||
this.$emit('input', Math.abs(v) * this.lonSelect)
|
||
},
|
||
},
|
||
lonDegree: {
|
||
get() {
|
||
return Math.floor(this.lonNumber)
|
||
},
|
||
set(v) {
|
||
this.$emit('input', Math.abs(v) * this.lonSelect + this.lonMinute / 60 + this.lonSecond / 3600)
|
||
},
|
||
},
|
||
lonMinute: {
|
||
get() {
|
||
return Math.floor(this.lonNumber * 60) % 60
|
||
},
|
||
set(v) {
|
||
this.$emit('input', this.lonDegree * this.lonSelect + Math.abs(v) / 60 + this.lonSecond / 3600)
|
||
},
|
||
},
|
||
lonSecond: {
|
||
get() {
|
||
return Math.floor(this.lonNumber * 3600) % 60
|
||
},
|
||
set(v) {
|
||
this.$emit('input', this.lonDegree * this.lonSelect + this.lonMinute / 60 + Math.abs(v) / 3600)
|
||
},
|
||
},
|
||
},
|
||
created() {
|
||
if (this.lon < 0) {
|
||
this.EWSelect = -1
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.longitude-input {
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|