💕所幸仍有光

1.[WDS] Disconnected!

原因：

2.属性nav未定义

问题定位在kycHeader组件里的nav

<van-nav-bar
   :title="tit"
   :title-class="nav-title"  //删除即可
   @click-right="loginOut"
   fixed
   right-text="退出登录"
   safe-area-inset-top
   z-index="999"
  />

vant导航栏里根本没有title-class属性，柚子估计是百度的看别人这样实现的吧，但是在vue3中会报警告

:deep(.van-nav-bar__content) {
    height: 44px;
  }

三、vue报错info?t=1659683857274

blog.csdn.net/weixin_4119…

sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

在依赖的源码中存在相关的调用

四、van-popup使用van-nav-bar头部或底部无法固定问题

使用弹出框时，弹出框内容是从后端返回的地区索引列，上面是fixed固定在页面顶部的搜索框，遇到的问题是地区数据量多需要滚动的时候，顶部导航栏也随之滚动！气死了

解决办法：

首先给van-popup设置overflo:hidden（关键-不要让外层滚动）
给你需要滚动的层加高度，并且加overflo:auto 就可以了

五、vant-field

失去焦点 @blur="loseBlur"

获得焦点 @focus="isShow=false"

 <van-field
          :formatter="formatter"
          @blur="loseBlur"
          @focus="isShow=false"
          class="phone-item"
          clearable
          maxlength="11"
          name="pattern"
          placeholder="请输入手机号"
          type="phoneNo"
          v-model="registerForm.phoneNo"
        />

 const loseBlur = () => {
        let re = /^1[3-9]\d{9}$/
        if (re.test(state.registerForm.phoneNo)) state.isShow = false
        else state.isShow = true
      }

只可以输入数字

:formatter="formatter"

const formatter = (value) => (value = value.replace(/[^\d]/g, ''))

六、手机区号同时支持地区和区号检索

1.搜索框

    <van-sticky>
      <van-search
        @cancel="onCancel"
        @search="onSearch"
        fixed
        placeholder="请输入搜索关键词"
        show-action
        v-model="searchValue"
        van-search-input-height="34px"
        van-search-padding="5px"
      />
    </van-sticky>

2.监听搜索框输入数据searchValue

     watch(
        () => state.searchValue,
        () => {
          state.filterCountry = userFilter(state.searchValue)
        }
      )
      watch(
        () => props.visible,
        (newval, oldval) => {
          state.isShow = newval
          if (!props.visible) state.searchValue = ''//再次点击弹出框时，之前搜索区域value清空
        }
      )

3.过滤地区的方法

    const userFilter = (query = '') => {
        if (query === null) {
          query = ''
        }
        const arr = state.countryAll.filter((item) => {
          return (
            item.name.toLowerCase().includes(query.toLowerCase()) ||
            item.phoneArea.includes(query)
          )
        })
        return arr
      }

七、ios上日期选择器底部被表单页面的提交按钮遮挡住了

解决方法：van-popup标签一定一定放到页面的第一子节点中

八、动态循环数组渲染多张图片一直渲染不出来！

真的是服了，试了好几种方法就是不行

九、移动端上下固定，中间高度自适应布局

1.顶部导航区

van-sticky标签底层布局就是fixed布局，固定定位，top:0;left:0;right:0;

 <van-sticky>
    <van-nav-bar
    :title="tit"
    @click-right="loginOut"
    fixed
    right-text="退出登录"
    safe-area-inset-top
    z-index="999"
  />
 </van-sticky>

2.底部提交按钮区

   <van-sticky class="page_bottom" position="bottom" v-if="isCardBtn">
    <van-button
      :class="{disable_bgc:true,click_bgc:!isEmpty}"
      :disabled="isEmpty"
      @click="handlesubmit"
      block
      class="btn-box"
    >提交</van-button>
  </van-sticky>

    //适配底部小黑条
.page_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px; //暂时发现安卓小屏手机安全区为0
  height: calc(50px + constant(safe-area-inset-bottom));
  height: calc(50px + env(safe-area-inset-bottom));
  background: #fff;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 iOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2*/
}

3.中间自适应，高度不够滚动

<div class="container"></div>

    //上下固定，中间区域自适应高度
.container {
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    top: 70px;
    bottom: calc(80px + constant(safe-area-inset-bottom));
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 18px;
    right: 18px;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
    overflow: auto;
    p {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 30px;
      overflow-wrap: break-word; //只在内容的断点换行
    }
  }
  .container::-webkit-scrollbar {
    display: none;//隐藏滚动条样式
  }

十、[Vue warn]: Plugin has already been applied to target app. 强迫症的我怎能容忍警告呢，其实控制台错误信息提示哪个文件有问题了，index.js,我在想，我哪有js文件呀！索性看到了这句话

定位.use果然对vant里的组件重复声明了

H5项目问题总结