工作實際排坑之旅

vue中的回車事件

vue使用element-ui的el-input監聽不了鍵盤事件，原因應該是element-ui自身封裝了一層div在input標籤外面，把原來的事件隱藏了，情況如下：

直接使用標籤:

　　<input placeholder="賬號" @keyup.enter="doLogin"></input>

element-ui: 

　　<el-input v-model="name" placeholder="賬號" @keyup.enter.native="doLogin"></el-input>

如果你使用了form表單 使用 @keyup.enter.native="doLogin" , 

兩個el-input 鍵盤事件有效, 如: 

<el-form>

　　<el-form-item prop="username">

　　　　<el-input name="username" type="text" autoComplete="on" placeholder="郵箱" />

　　</el-form-item>

　　<el-form-item prop="password">

　　　　<el-input name="password" type="password" @keyup.enter.native="handleLogin"  autoComplete="on" placeholder="密碼"></el-input>

　　</el-form-item>

　　<el-form-item>

　　　　<el-button type="primary"  @click.native.prevent="handleLogin">登錄</el-button>

　　</el-form-item>

</el-form>

如果只有一個el-input , 則無效, 需加上@submit.native.prevent纔有效,阻值冒泡,默認事件,  如: 

<el-form  @submit.native.prevent>

　　<el-form-item>

　　　　<el-input  placeholder="請輸入內容" @keyup.enter.native="submitImage"></el-input>

　　</el-form-item>

</el-form>

 

js中判斷數組中是否包含某元素的方法

方法一： 
arr.indexOf(某元素)：未找到則返回 -1。 

indexOf()完整語法：

array.indexOf(item,start) 
參數： 
item：必須。查找的元素。 
start：可選的整數參數。規定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的首字符開始檢索

注：string.indexOf()返回某個指定的字符串值在字符串中首次出現的位置。

方法二：arr.find() 
數組實例的find()用於找出第一個符合條件的數組元素。它的參數是一個回調函數，所有數組元素依次遍歷該回調函數，直到找出第一個返回值爲true的元素，然後返回該元素，否則返回undefined。 
find() 方法爲數組中的每個元素都調用一次函數執行：

• 當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再調用執行函數。
• 如果沒有符合條件的元素返回 undefined 
  注意: find() 對於空數組，函數是不會執行的。 
  注意: find() 並沒有改變數組的原始值。

[1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) // 10

實際用法：

arr.find(function(value) {
    if(value === 要查找的值) {
        //則包含該元素
    }
})

方法三：array.findIndex() 
array.findIndex()和array.find()十分類似，返回第一個符合條件的數組元素的位置，如果所有元素都不符合條件，則返回-1。 
findIndex() 方法爲數組中的每個元素都調用一次函數執行：

當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之後的值不會再調用執行函數。 
如果沒有符合條件的元素返回 -1

注意: findIndex() 對於空數組，函數是不會執行的。 
注意: findIndex() 並沒有改變數組的原始值

[1,5,10,15].findIndex(function(value, index, arr) {
    return value > 9;
}) // 2

方法二和方法三，這兩個方法都可以發現NaN，彌補了方法一IndexOf()的不足。

[NaN].indexOf(NaN) 
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

方法四：for() 
遍歷數組，然後 if 判斷

var arr = [1, 5, 10, 15];
//傳統for
for(let i=0; i<arr.length; i++) {
    if(arr[i] === 查找值) {
        //則包含該元素
    }
}
// for...of
for(v of arr) {
    if(v === 查找值) {
        //則包含該元素
    }
}
//forEach
arr.forEach(v=>{
    if(v === 查找值) {
        //則包含該元素
    }
})

方法五： ES6中的includes()

VUE中動畫的實現

在要觸發的DOM元素外用<transition name="name"></transition>包裹

在CSS中加入動畫 .name-enter-active, .name-leave-active, .name-enter, .name-leave-to

涉及到v-if,v-show的區別，詳見文檔https://cn.vuejs.org/v2/guide/transitions.html

---

阻止冒泡，默認行爲的方法

方法一  @click改爲@click.stop

方法二 在不想觸發的區域內獲得id在方法內

            if (!id.contains(event.target)) { console.log('不繼續向上觸發')}

方法三 不想點擊時冒泡觸發上面的默認動作在DOM上加入 @mousedown = "preventDefault"

preventDefault () { // 防止冒泡，避免在click前會觸發blur
    event.preventDefault();
},

---

 

無法修改Element-UI 

去掉style上的scoped，在vue組件中，在style標籤上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有化的目的

解決方案：vue-loader之scoped-css

---

 

返回頂部

返回頂部是

 document.body.scrollTop = 0

但是當想要下拉並不是整個頁面而是其中一部分返回頂部時，可以通過event.path來尋找需要返回頂部的DOM元素，操控DOM元素的scrollTop屬性等於0 即可返回頂部

---

H5界面，手機物理回退問題

需要在mouted中加入判斷window.history時，進入自己的函數

if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.fun, false);
 }


fun () {
    this.$router.push({name: 'workIndex'});
}

---

JS中小數相乘精度不準確

由於進制問題導致的小數相乘精度不準確，eg：

let a = 0.00001;
let b = 0.00002;
let c = 0.00003;
a + b === c //false

解決辦法

function accMul(arg1,arg2){
         var m=0,s1=arg1.toString(),s2=arg2.toString();
         try{m+=s1.split(".")[1].length}catch(e){}
         try{m+=s2.split(".")[1].length}catch(e){}
        
         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(2);
    }

---

VUE中給後臺傳參進行excel導出

使用第三方庫axios。

axios({ // 用axios發送post請求
                    method: 'post',
                    url: '/erp/api/officesupply-activiti-apply/export', // 請求地址
                    data: this.downloadList, // 參數
                    responseType: 'blob' // 表明返回服務器返回的數據類型
                })
                    .then((res) => { // 處理返回的文件流
                        const content = res.data;
                        const blob = new window.Blob([content], {type: 'application/octet-binary'});
                        const fileName = `${this.officeForm.id}號辦公用品採購表單.xls`;
                        if ('download' in document.createElement('a')) { // 非IE下載
                            const elink = document.createElement('a');
                            elink.download = fileName;
                            elink.style.display = 'none';
                            elink.href = window.URL.createObjectURL(blob); 
                            document.body.appendChild(elink);
                            elink.click();
                            window.URL.revokeObjectURL(elink.href); // 釋放URL 對象
                            document.body.removeChild(elink);
                        } else { // IE10+下載
                            navigator.msSaveBlob(blob, fileName);
                        }
                    });

---