上图圈画的为需求(点击批量导入按钮获取粘贴板内容并且付给每组经纬度输入框)
来 实现它
下面为 主要 代码
<a-form
class="frombox"
ref="formRef"
:model="formState"
:rules="rules"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 17 }"
>
<div
style="
border-top: 1px solid #a9a8ab;
border-bottom: 1px solid #a9a8ab;
border-width: 80%;
padding-top: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
"
>
<span style="margin: 0 0 4% 4%; display: block; font-weight: bold">
坐标(至少3个点,第一个点和最后一个点为同一点,围成一个闭合区域,批量导入数据格式应纬经度以逗号隔开,每组以分号隔开,例如:445.5652,454.7844;775.5652,854.7844;445.5652,454.7844;)
</span>
<a-button
style="margin: 0 10px 10px 10%"
@click="addCoor"
type="primary"
ghost
>
新增点
</a-button>
<a-button type="primary" @click="Import">批量导入</a-button>
<a-card
v-for="(location, index) in formState.location"
:key="index"
style="margin-bottom: 10px; margin-left: 6%; width: 90%"
title="坐标"
>
<template #extra>
<a-button
type="primary"
danger
ghost
size="small"
@click="deleteCoor(index)"
>
删除
</a-button>
</template>
<span style="font-weight: bold">点{{ index + 1 }}</span>
<a-form-item
label="经度"
:name="['location', index, 'longitude']"
:rules="{
required: true,
trigger: 'blur',
validator: validatePass,
}"
>
<a-input
v-model:value="location.longitude"
placeholder="整数位1-3位,小数位固定四位"
allowClear
/>
</a-form-item>
<a-form-item
label="纬度"
:name="['location', index, 'latitude']"
:rules="{
required: true,
trigger: 'blur',
validator: validatePass,
}"
>
<a-input
v-model:value="location.latitude"
placeholder="整数位1-3位,小数位固定四位"
allowClear
/>
</a-form-item>
</a-card>
</div>
</a-form>
<script lang="ts" setup>
import { ref, unref, onMounted } from 'vue'
import { phone_reg, longitude } from '@/utils/reg'
let validatePass = async (rule: any, value: string) => {
if (value === '') {
return Promise.reject('请输入')
} else {
if (!longitude.test(value)) {
return Promise.reject('请输入整数位1-3位,小数位固定四位')
}
}
return Promise.resolve()
}
const formRef = ref()
const formState = ref<any>({
location: [
{ latitude: '', longitude: '' },
{ latitude: '', longitude: '' },
{ latitude: '', longitude: '' },
],
})
//点击新增点按钮
function addCoor() {
let location = {
longitude: '',
latitude: '',
}
formState.value.location.push(location)
}
//点击删除
function deleteCoor(Index: number) {
formState.value.location.splice(Index, 1)
}
//获取粘贴板
function Import() {
let arr: any = []
let arr2: any = []
navigator.clipboard
.readText()
.then((v) => {
if (v) {
let a = v.split(';')
a.forEach((item, index) => {
if (index == a.length - 1) return
arr = item.split(',')
arr2.push({ latitude: arr[0], longitude: arr[1] })
})
formState.value.location = arr2
} else {
message.error('粘贴板为空')
}
})
.catch((v) => {
message.error('获取剪贴板内容失败')
})
}
</script>