项目Bug解决方案整理

最新推荐文章于 2024-09-10 09:55:59 发布

나 를 사랑 해요

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量3.6k

点赞数

分类专栏： use

本文链接：https://blog.csdn.net/weixin_42684309/article/details/84649348

版权

use 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、input在注册页面如何做限制？

在input标签里加上oninput和onafterpaste给input做限制

<input type="tel" maxlength="6" 
oninput="if(this.value.length==1){
        this.value=this.value.replace(/[^1-9]/g,'')
    }else if(
        value.length>11){value=value.slice(0,11)
    }else{
        this.value=this.value.replace(/\D/g,'')
    }"  
    onafterpaste="if(this.value.length==1){
        this.value=this.value.replace(/[^1-9]/g,'')
    }else{
        this.value=this.value.replace(/\D/g,'')
    }"
/>

二、vue使用第三方插件muse-ui的省级联动slide-picker组件的时候在ios上面会出现兼容问题

面对兼容问题本就很头疼的我发现，在muse-ui的slide-picker插件在使用的时候，在ios上面会出现滑动很卡的问题，那么在我试了很多种方法之后发现这个问题还是不能解决，最后发现是我在最外层给它包的bottom-sheet的原因。本身我是想把它写在这个bottom-sheet的底部弹出面板里面的，结果就发现这样的话slide-picker在ios上就划不动了，所以我索性就用div代替bottom-sheet，问题就轻松解决了

代码如下：

<div class="bottomframe_wrap" v-show="show_sheet3">
   <div v-show="show_sheet3" class="bottomframe">
      <div class="scroll-controls">
          <span class="scroll-cancel" @click="show_sheet3=false;">取消</span>
          <span class="scroll-Middle"></span>
          <span class="scroll-submit" @click="changediqu3">确认</span>
      </div>
      <div class="demo-picker-container">
          <mu-slide-picker :slots="addressSlots3" :visible-item-count="5" @change="addressChange3"></mu-slide-picker>
      </div>
   </div>
</div>

三、刚解决了卡顿问题，接着就又来了一个yd-datetime的兼容问题

yd-datetime不管放在页面的哪个位置，只要input调起ios的软键盘时，它都会在底部出现，和软键盘同时在页面的底部，又是一个兼容，要疯了；想尽一切方法之后发现，我需要给input写一个点击事件，当它点击的时候让yd-datetime隐藏，当点击yd-datetime的时候让它本身显示。这样就能完美的解决掉这个兼容问题啦！

代码如下：

<yd-datetime 
:start-date="current" 
end-date="2099-12-31" 
v-model="crp_exp_dt_tmp" 
type="date" slot="right" 
:init-emit='false' 
ref="datetime" 
@click.native="valid"></yd-datetime>

<yd-input 
ref="stl_oac" 
slot="right" 
v-model="stl_oac" 
regex="/^\d{16,21}$/" 
placeholder="只支持储蓄卡" 
required 
:show-success-icon="false"
:show-error-icon="false" 
:show-clear-icon="false" 
@click.native="onInputClick"></yd-input>

在这里要注意了，在vue中给第三方插件写点击事件时，一定要写成@click.native的格式，否则不生效

四、如何给一个button点击事件触发下载app呢？

首先这个时候我们之前所用到的window.open()事件在这里已经不能满足下载事件的需求了，那么我就从网上找来了window.location()方法来代替它，下载效果就能实现了

代码如下：

let url = "android下载的安装包";
let ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
    if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {              
       window.location = "ios下载的安装包";
    } else if(navigator.userAgent.match(/android/i)) {
       window.location.href = url; 
    }
}

五、如何解决整个页面的内容都能被双击或长按弹出复制按钮？

页面整个内容都能被复制？在我的认知里，不是应该只有文本框这些能被复制内容吗？图片都能出现copy，什么鬼，后来给整个页面添加了一下的cs修饰时，这个问题才算被OK:

*{
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
    -webkit-user-select:none; /*webkit浏览器*/
    -khtml-user-select:none; /*早期浏览器*/
    -moz-user-select:none;/*火狐*/
    -ms-user-select:none; /*IE10*/
    user-select:none;
}
input,textarea {
    -webkit-user-select:auto; /*webkit浏览器*/
    margin: 0px;
    padding: 0px;
    outline: none;
}

六、vue安装了px2rem-loader插件px自动转rem后，如何解决那些我们不想转rem的元素样式呢？

百度搜索了之后最终找到了一个最让我满意的解决方案：

那就是在不希望转rem的css后添加/*no*/就轻松搞定

代码如下：

.mu-slide-picker-item {
  font-size: 16px; /*no*/
  height: 36px; /*no*/
  line-height: 36px; /*no*/
  padding: 0 10px; /*no*/
}

PS：第三方插件在真机测试的时候会发现这样的修改并没生效，那就只能在node_modules中找到第三方插件的dist文件夹里的对应文件进行修改了，但是此时如果是多人开发时，每次其他同事上线的版本都会把你的给覆盖掉，当然也包括我们在源码修改的样式。

注：muse-ui是一个例外，它的样式修改px拒绝转rem时在页面style标签里修改不生效，只能在源码里面修改

在我以为一切都已经解决完了的时候，此时我有迎来了新的挑战

七、yd-datetime如何改变它的高度呢？

因为yd-datetime默认展示的是7条数据，而且这个改变是通过js做的动态，所以，此时我们又需要在它的源码里修改了，我们只需要在源码里搜索7，然后修改为我们自己期望的值就可以，但是此时呢再对应修改yd-datetime-content的高度和yd-datetime-shade的background-size就可以啦。

代码如下：

.yd-datetime-content{
    height:200px!important;/*no*/
}
.yd-datetime-shade{
    background-size: 100% 80px!important;/*no*/
}

PS：一定要加上!important

八、这个问题呢其实并不是一个Bug,只能说是个人修改

在我使用vue-ydui里面的yd-cityselect省级联动组件时发现它的数据都是自己的，但是这些数据已经足够我们使用了，但是，这个数据的格式很复杂，属于数组对象形式的，并且，它的数据在写死的情况下我如果只想用到省市两级的联动时我不可能再在它的源码里面去修改，因为我不止一个页面用到了省级联动，而且我并不是每个页面的省级联动都是省市两级的，那么我只能想办法在当前页面获取到的数据上面做遍历截取。

遍历很容易，但是在这种三级的数组对象里面想要删除最后一级的数组却不是一件容易的事，于是我在各种查找如何去除数组中的某一部分的方法是发现，我可以先获取到这个嵌套数组中的某一对象数组，然后再通过delete方法删除该数组中的嵌套数组部分，并把剩下的重新赋值给该数组对象，最后用一个空的数组，进行赋值，总之很麻烦。

代码如下：

 created() {    
    this.find()
  },
  methods: {
    find(){
      //将三级联动遍历修改为两级联动
      let _this = this
      let arr = []
      District.forEach(function(item){//遍历原始数组   
        (item.c).forEach(function (param) { //遍历原始数组中的对象的c属性
          delete param.c  //删除item.c数组里的每个对象的c属性  
        })
        _this.arr.push({c:item.c, n:item.n,v:item.v})//将删除过的数组重新赋值给arr1数组
      })
      console.log(_this.arr)
      this.district = _this.arr
    }
}

PS：这里给arr赋值时一定要在遍历删除item.c的数据后，否则会报错

好了，以上就是这次我所总结的这次我认为还算有价值的Bug解决方案。