开发vue组件踩过的坑

前言

近期又完成一个vue项目,公司好像十分看好vue框架,之后的几个项目也准备使用vue框架。然而回想起之前,使用vue开发组件时遇到的各种bug,心中一阵后怕。在此记录下那些填坑的历程,方便以后查阅。

问题

  1. input输入出现白屏问题
    项目要求header部分固定,main部分可以滚动,css3实现main的css:

    .main{
           overflow: hidden;
           height: calc(100vh - 40px);
           position: relative;
           ....         
        }

    聚焦时,键盘弹起,屏幕滚动,因此出现白屏。
    只需在main的样式中加上:transform: scale(0);
    推荐一篇transform对position影响的博客,CSS3 transform对普通元素的N多渲染影响

  2. scroller组件出现白屏问题
    项目中使用了better-scroll实现一个上拉加载更多和下拉刷新的组件,测试发现部分手机,无法显示列表。具体原因目前不清楚,但是估计是better-scroll使用了transform的锅。一开始以为是部分手机不支持calc计算,因此在组件的计算属性里计算出屏幕高度,然并卵。可是,将计算的高度发在vue钩子函数mounted中,竟然起作用了,太神奇了

  3. input[type=file]上传 图片问题
    开发上传图片组件时,input[type=file]会调用原生相册或者相机,由于安卓和IOS对系统的保护,屏蔽了input[type=file]的功能,这个需要原生代码实现
  4. JSON数据量很大(约1.5M),卡屏问题
    开发tree组件时,正常情况使用v-show来控制tree的折叠和展开,由于数据量很大,出现卡屏问题。网上搜索了一下,v-if在这种情况会比v-show性能更好。
    使用v-if出现当折叠起来的元素被选中时,其子元素没被选中。这时需要操作数据源,将其设置为选中状态。
Logo

前往低代码交流专区

更多推荐