vue3+js+vant4使用van-popup在ios端打开弹窗，软键盘会挡住弹窗，或者将header部分顶出屏幕，如何解决

前言：安卓会自动实现下图的效果，而ios不会，ios软键盘会覆盖弹窗

要实现的效果：点击输入框van-field，弹窗会出现在键盘顶部

问题一： 软键盘弹起时 header 部分被顶出屏幕

一般情况，直接加入vant4官方预留的teleport属性，可以把组件挂载到最外层boby上，可以解决键盘弹起时 header 部分被顶出屏幕的问题：

问题二：软键盘会挡住弹窗（我这个弹窗是封装在了子组件）

我的由于布局原因，试了网上多种方法，依旧不行，所以最终使用原始、稍笨拙的方式实现了上图所示的效果：

<template>
  <van-popup round position="bottom" :style="{bottom:popupBottom}">
     <van-field v-model="title" @focus="onFocus" @blur="onBlur" />
  </van-popup>
</template>
<script setup>
import { isIOS } from "vant/lib/utils";//判断是否是ios设备，只对ios设备进行处理

const onFocus=()=>{//点击输入框时
  if (isIOS()) {
    setTimeout(() => { // 延迟调整弹窗位置，确保页面布局稳定后再聚焦(必须加延时器，不然点击输入框不出现键盘)
      popupBottom.value = '320px'; //ios的软键盘高度差不多都一样，标准的是336px，可根据自己需求适当修改
      console.log("popupBottom.value", popupBottom.value);//查看是否给van-popup 的style样式赋值成功
      const activeElement = document.activeElement;      // 延迟聚焦，确保布局调整后软键盘能够正确弹出
      if (activeElement && activeElement.tagName === 'INPUT') {
        activeElement.focus(); // 确保输入框聚焦
      }
    }, 50); // 设置小的延迟，确保布局变化后焦点能够生效
  } else {
    console.log("非ios系统");
  }
}
//失去焦点
const onBlur=()=>{
  if (isIOS()) {
    popupBottom.value = '0'; //删除掉增加的键盘高度
  }
}

这样就解决问题了~~~

注意：（如果你设置好后，发现偶尔键盘和弹窗中间会有很大的空隙，大概30px甚至更大。。。那就是和我的布局差不多，因为我发生了这种情况，那么请往下看~ ）

什么时候会出现这种情况：

    当你父组件滑到最底部的时候，再打开子组件，点击输入框，键盘和弹窗中间会有很大的空隙

原因：

  父组件已经滑动到最底部了，又随着子组件增高了336px；所以弹窗就又被顶上去一段距离

解决：

在你关闭弹窗的时候，让父组件再滚回最顶部，而不是停留在最底部

// 关闭弹窗事件
const closeInputPicker=()=>{
    showButtonPicker.value = false // 关闭弹窗
    if (isIOS()) {
      addHeight.value=true  //我这里设置了动态高度，当ios设备时，这个页面的最小高度是1500px；这样就不会在打开弹窗的时候父组件已经是最底部了，你们可以不用设置
      window.scrollTo(0, 0);   // 滚动到页面顶部
    }else{
      addHeight.value=false
    }
}

以上代码是因为自己踩坑好久才搞出来，所以记录下，如果有更好的解决方式，欢迎评论区留言哦(*╹▽╹*)