总结项目用到的一些处理方法，用来解决数据处理的一些实际问题，所有方法都可以放在一个公共工具方法里面，实现不限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深度监听对象

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

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

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

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

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

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

Str.replace(/^,+/,"").replace(/,+$/,"") 项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）

同理也可以过滤/等项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）

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)
    }

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

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

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

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

以下是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{
  width: 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.鼠标放在列表上显示出操作的选项，如果已经选择了多个列表则就不显示了。

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

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

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

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

渲染的时候做个比较项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）。如果是多选了之后就多加一个条件,多选了就不记录ID了从而实现了，多选不显示鼠标移入情况。

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

9. elementUI 清空table排序

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

this.$refs.multipleSelection.clearSort();

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

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

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

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

离开时清掉：

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

11.判断微信浏览器

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

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

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

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前端实现表格内容搜索

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

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

computed: {
    // 模糊搜索
    tables() {
      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里面的数据原始数据
    },
  }

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

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

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

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

在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\n]/)

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

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

2.Vue深度监听对象

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

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

5. 过滤emoji字符

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

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

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

9. elementUI 清空table排序

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

11.判断微信浏览器

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

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

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

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

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

相关推荐