項目中解決實際問題的代碼片斷-javascript方法，Vue方法（長期更新）

時間 2019-11-30

標籤項目解決實際問題代碼片斷 javascript 方法 vue 長期更新欄目 JavaScript 简体版

原文原文鏈接

總結項目用到的一些處理方法，用來解決數據處理的一些實際問題，全部方法均可以放在一個公共工具方法裏面，實現不限ES5，ES6還有些Vue處理的方法。javascript

都是項目中來的，有代碼跟圖片展現，長期更新。css

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.去掉字符串左右兩邊的逗號

去掉字符串左右兩邊的逗號（，）因爲，後端要求數據已字符串形式傳給他，中間以逗號隔開，因此得建立字符串，在過濾兩邊逗號。vue

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

同理也能夠過濾/等java

5. 過濾emoji字符

業務判斷輸入的內容是否包含表情符號，這裏是由於後端不支持ios

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 走馬燈用法就不說了web

如下是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.鼠標放在列表上顯示出操做的選項，若是已經選擇了多個列表則就不顯示了。

選擇了多我的後不顯示操做提示數組

用的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() {
      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監聽路由變化的三個方法。

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]/)

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+)\.(\d\d).*$/, '$1$2.$3');
   return value;
},