项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）

总结项目用到的一些处理方法，用来解决数据处理的一些实际问题，所有方法都可以放在一个公共工具方法里面，实现不限ES5，ES6还有些Vue处理的方法。

都是项目中来的，有代码跟图片展示，长期更新。

1.获取两个给定日期之间所有日期集合

/**
    * 传入一个日期字符串（不要时间，如果带时间的话在修改方法）
    **datestr:形如‘2017-06-12’的字符串（如果是2017.06.12格式在修改代码，这里没有做通用）
    **return Date 对象
**/
getDate (datestr) {
    var temp = datestr.split("-");
    if (temp[1] === '01') {
        temp[0] = parseInt(temp[0],10) - 1;
        temp[1] = '12';
    } else {
        temp[1] = parseInt(temp[1],10) - 1;
    }
    //new Date()的月份入参实际都是当前值-1
    var date = new Date(temp[0], temp[1], temp[2]);
    return date;
},
/**
 * 这个方法用到了上面方法，如果传的日期格式是日期就不需要上面方法了
    * 传入一个日期字符串（不要时间，如果带时间的话在修改方法）
    **start:形如‘2017-06-12’的字符串
    **end:形如‘2017-08-12’的字符串
    **return Date 字符串数组 ['2017-06-12','2017-06-13','2017-06-13'....]
**/
getDiffDate (start, end) {
    var startTime = this.getDate(start);
    var endTime = this.getDate(end);
    var dateArr = [];
    while ((endTime.getTime() - startTime.getTime()) >= 0) {
        var year = startTime.getFullYear();
        var month = (startTime.getMonth()+1).toString().length === 1 ? "0" + (startTime.getMonth()+1).toString():(startTime.getMonth()+1).toString();
        var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate(): startTime.getDate();
        dateArr.push(year + "-" + month + "-" + day);
        startTime.setDate(startTime.getDate() + 1);
    }
    return dateArr;
},

2.Vue深度监听对象

3.Vue   filters过滤数据处理日期格式化时间

（由于后端返回的日期是时间戳字符串）

 

4.去掉字符串左右两边的逗号

去掉字符串左右两边的逗号（，）由于，后端要求数据已字符串形式传给他，中间以逗号隔开，所以得创建字符串，在过滤两边逗号。

Str.replace(/^,+/,"").replace(/,+$/,"") 

同理也可以过滤/等

5. 过滤emoji字符

业务判断输入的内容是否包含表情符号，这里是因为后端不支持

filteremoji(val){
      let regRule = /uD83C[uDF00-uDFFF]|uD83D[uDC00-uDE4F]/g; 
      if(val.match(regRule)) { 
        // 替换后的文本
        val = val.replace(/uD83C[uDF00-uDFFF]|uD83D[uDC00-uDE4F]/g, ""); 
        return true; //存在true
      }
      return false;//不存在false
    },

6.Vue项目中利用七牛批量上传图片  

import * as qiniu from 'qiniu-js';

uploadImgChange(){//选择好图片后触发这个方法
      let that = this;
      // let file = $("#uploadImg").get(0).files[0];
      let file = $("#uploadImg").get(0).files;//获取所有选中的文件
      // console.log(file)
      // return
      let key = new Date().getTime()+Math.floor(Math.random()*9+1);
      let token = this.token;//获取七牛云上传的token,token有实效，每次上传前都需要获取新的
      let config = {
        useCdnDomain: true,
        region: null
      };
      let putExtra = {
        fname: '',
        params: {},
        mimeType: ["image/png","image/jpg","image/jpeg","image/bmp"]
        // mimeType: null
      };
      let observer = {
        next(response){
          // console.log(response) 下面写一些进度进度是每一个图片单独的进度哦不是总的，七牛本来不支持多文件的也没有总的进度
          let total = response.total;
          // $(".speed").append('<span>进度：'+ total.percent + '% </span>');
          if(total.percent<100){
            total.percent = Math.ceil(total.percent);
          }
          that.percentage = total.percent;
          // $(".speed").text("进度：" + total.percent + "% ");
        },
        error(err){
          // console.log(err)
          if(err.code=='614'){
            // that.$message({
            //   type: "error",
            //   message: '图片名称冲突，请修改名称后从新上传',
            //   duration: "1500"
            // });
          }
        }, 
        complete(res){//res.key是上传成功后返回的图片名字，前面加上上传的路径就是一个图片的地址了，这个上传的路径需要后端给下
          that.uploadImg.push('https://上传的路径/'+res.key)
        }
      }
　　　　//由于七牛不支持多文件上传，所以循环分开上传
      for(let i =0;i<file.length;i++){
        if(file[i].type!='image/png'&&file[i].type!='image/jpg'&&file[i].type!='image/jpeg'&&file[i].type!='image/bmp'){
          return
        }else{
          let key = new Date().getTime()+Math.floor(Math.random()*100+1)+file[i].name;//由于服务器图片重名后会报错所以这里用时间戳加随机数加图片名字来命名规避报错
          // console.log(key)
          let observable = qiniu.upload(file[i], key, token, putExtra, config);
          let subscription = observable.subscribe(observer) // 这样传参形式也可以
        }
        
      }
      // let observable = qiniu.upload(file, key, token, putExtra, config);
      // let subscription = observable.subscribe(observer) // 这样传参形式也可以
    
    // let subscription;
      // let formdata = new FormData();
      //  let observable = qiniu.upload(file, key, token, putExtra, config);
        // observable.subscribe(next)
    }

7. 根据elementUI的Carousel 走马灯改编一个图片预览

在项目中使用了，谁然看着不是很好，但是不需要另外在引入其它预览插件了 效果：Carousel 走马灯用法就不说了

以下是css样式

.uploadImgBox{
  /* border:1px solid #08B3E9; */
  margin:20px;
  /* padding:20px; */
  display: flex;
  flex-wrap: wrap;
}
.uploadImgBox .uploadImgBox-list{
  margin-right: 10px;
  margin-bottom: 10px;
  border:1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  transition: 0.2s;
   -webkit-transition: 0.2s;
   position: relative;
}
.uploadImgBox .uploadImgBox-list:hover{
  box-shadow: 0 0 10px #ccc;  
  transition: 0.2s;
  -webkit-transition: 0.2s;
}
.uploadImgBox .uploadImgBox-list img{
   40px;
  height: 40px;
}
.uploadImgBox .uploadImgBox-list i{
  position: absolute;
  background-color: #fff;
  right:0;
  top:0;
  font-size: 16px;
  border-radius: 5px;
  color: #FF7B7B;
  opacity: 0;
  transition: 0.2s;
  -webkit-transition: 0.2s;
}
.uploadImgBox .uploadImgBox-list:hover i{
  opacity: 1; 
  transition: 0.2s;
  -webkit-transition: 0.2s;
}

8.鼠标放在列表上显示出操作的选项，如果已经选择了多个列表则就不显示了。

选择了多个人后不显示操作提示

用的elementUI，Vue。利用表格鼠标移入列表方法  @cell-mouse-enter="cellmouseenter"，当鼠标移入的时候就把这个id记录下来，移出的时候就清空

渲染的时候做个比较。如果是多选了之后就多加一个条件,多选了就不记录ID了从而实现了，多选不显示鼠标移入情况。

9. elementUI  清空table排序

前提是前端排序，如果后端排序的话清空后还得调用接口

this.$refs.multipleSelection.clearSort();

10.Vue等单页面项目的 setInterval 循环计时问题。

如果组件内有循环计时功能，这个时候如果切换组件，这个计算器依旧在运行，可以在离开组件之前清空掉。

把计时定义到全局变量里面：

离开时清掉：

11.判断微信浏览器

 isWeixin:function(){
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            return true;
        } else {
            return false;
        }
    }

12.验证手机号格式是否正确

var myreg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+d{8})$/;  
          if(!myreg.test(phone)){  
            alert('手机号或验证码格式有误');
            return false;  
          }

13.vue,elementUI前端实现表格内容搜索

在计算属性里面计算绑定的表格数据。

computed: {
    // 模糊搜索
    tables() {//新属性依赖多个动态属性search，tableData,只要其中一个发生变化，新属性就会变化
      let search = this.search.toLowerCase();
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableData.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      return this.tableData; //data里面的数据原始数据
    },
  }

 

watch与computed的区别

①从属性名上，computed是计算属性，也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，然后执行相对应的函数。
②从实现上，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时，都会执行回调。其实从这一点来看，都是在依赖的值变化之后，去执行回调。很多功能本来就很多属性都可以用，只不过有更适合的。如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。
③watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作。computed通常就是简单的计算。
④watch和computed并没有哪个更底层，watch内部调用的是vm.$watch，它们的共同之处就是每个定义的属性都单独建立了一个Watcher对象。

14.Vue监听路由变化的三个方法。

15. ios中禁止Safari浏览器用户缩放页面

在ios10前我们能通过设置meta来禁止用户缩放页面：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 

 

在ios10系统中meta设置失效了

为了提高Safari中网站的辅助功能，即使网站在视口中设置了user-scalable = no，用户也可以手动缩放。 
解决方法：监听事件来阻止

window.onload=function () {  
        document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false)  
}

16. javascript 用split分割换行符：str.split(/[s ]/)

17.正则处理输入数据只能输入数字、1个小数点、小数点后最多两位数

这个是在vue用elementUI输入框的时候发现的一个问题，就是有时候视图更新了但是数据没更新(原因是js直接修改了dom)，有时候数据更新了，视图没更新(原因是数据更新后视图要在下一个下次 DOM 更新循环之后执行)，解决方法用：

this.$nextTick(() => {})   或者   setTimeout(()=>{},0)

t_c(value){
   //先把非数字的都替换掉，除了数字和.
   value = value.replace(/[^d.]/g, "");
   // //保证只有出现一个.而没有多个.
   value = value.replace(/.{2,}/g, ".");
   // //必须保证第一个为数字而不是.
   value = value.replace(/^./g, "");
   // //保证.只出现一次，而不能出现两次以上
   value = value.replace(".", "$#$").replace(/./g, "").replace("$#$", ".");
   // //只能输入两个小数
   value = value.replace(/^(-)*(d+).(dd).*$/, '$1$2.$3');
   return value;
},