vue3.0 antdesginVue 获取粘贴板（批量导入经纬度）

上图圈画的为需求（点击批量导入按钮获取粘贴板内容并且付给每组经纬度输入框）
来 实现它
下面为 主要 代码

 <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>