移動(dòng)端株旷，UI還原很嚴(yán)格塔次，1px都不能差爷恳。安裝了Sketch有缆，方便定位到元素。
審批主要是詳情頁展示：
實(shí)現(xiàn)方法：
<div v-for="(ele, index) in list"
:key="'att'+index"
class="item">
<img :src="ele.src" class="icon">
<div class="info">
<p class="name">{{ ele.name }}</p>
<p class="size">{{ ele.size }}</p>
</div>
</div>
遇到的問題：
之前實(shí)現(xiàn)方法直接把svg 的src常量定義為 相對(duì)路徑棚壁，導(dǎo)致無法編譯。
更改：
import word from '../assets/svgs/word.svg';
import excel from '../assets/svgs/excel.svg';
先用inport方式引入铸豁，賦值給svg 的src常量
src: word
2灌曙，
Duplicate keys detected: '0'. This may cause an update error.
在頁面中有很多for循環(huán)導(dǎo)致key一樣菊碟。
解決辦法：修改其中的key值节芥，加個(gè)前綴
:key="'att'+index"
3，
移動(dòng)端頁面過長，超過一屏头镊，多個(gè)標(biāo)題吸頂效果蚣驼。
1）監(jiān)聽滾動(dòng)
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
window.removeEventListener('scroll', this.handleScroll);
}
2）記錄每個(gè)要吸頂?shù)臉?biāo)題距頁面頂部高度
let header = document.getElementsByClassName('info-title');
// 單個(gè)模塊區(qū)域
let section = document.getElementsByTagName('section');
let len = header.length;
for(let i = 0; i < len; i++) {
this.arr.push(header[i].offsetTop);
}
this.arr.push(header[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
3） handleScroll為頁面滾動(dòng)的監(jiān)聽回調(diào)
handleScroll() {
// 吸頂元素
let header = document.getElementsByClassName('info-title');
let len = header.length;
// 頁面滾動(dòng)距離
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = 0; i < len; i++) {
// 滾動(dòng)距離在兩個(gè)模塊之間
if (scrollTop > this.arr[i] && scrollTop < this.arr[i + 1]) {
header[i].className = 'info-title box1';
} else {
header[i].className = 'info-title';
}
}
}
4，firefox瀏覽器中使用flex布局overflow失效相艇。
原因：在firefox下颖杏，flex元素默認(rèn)將其最小尺寸設(shè)置為其子元素的尺寸，這意味著父元素永遠(yuǎn)能顯示全部子元素坛芽，即使這樣導(dǎo)致整個(gè)頁面超過了屏幕留储。這還overflow個(gè)鬼嘛！咙轩。因此我們需要覆蓋默認(rèn)的最小尺寸获讳。
解決辦法:
給該元素設(shè)置最小高度
min-height: 0
5，js中數(shù)組判斷是否包含某個(gè)元素：
1）arr.idnexOf('s') > 0 首次出現(xiàn)的位置
2）find 并沒有改變數(shù)組原始值活喊∝はィ空數(shù)組function不執(zhí)行的。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
3）findIndex同find钾菊，返回元素位置
6帅矗，數(shù)組深拷貝的方法
1）es6解構(gòu)：
a = [...b]
7，git 刪除遠(yuǎn)程和本地分支
git branch -a //查看分支
git push origin --delete [name]//刪除遠(yuǎn)程分支
git branch -d [name] //刪除本地分支
8煞烫，git 基于已有分支創(chuàng)建新分支
cd 項(xiàng)目目錄/已有分支
git checkout -b yourbranchname origin/oldbranchname
git push origin yourbranchname
9, 獲取當(dāng)前時(shí)間
new Date()
轉(zhuǎn)換成時(shí)間戳
(new Date()).valueOf()
new Date().getTime()
10浑此，獲取n-m之間隨機(jī)數(shù)
Math.random()*(n+1-m)+m
11，npm run dev報(bào)錯(cuò)
問題原因：node版本問題
然后找到 D:\text\vue\iview-admin\build\webpack.dev.config.js打開
將這一行代碼：
fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});替換為
fs.write(fd, buf, 0, 'utf-8', function(err, written, buffer) {});保存然再次執(zhí)行 npm run dev
12红竭，頁面跳轉(zhuǎn)
1）新窗口跳轉(zhuǎn)
window.open('url');
<a title="腳本之家" target="_blank">
2）本窗口跳轉(zhuǎn)
<a title="腳本之家">
window.location.href="url"
3）返回上一頁
window.history.back(-1);返回上一頁
13尤勋，safari下input disabled時(shí)候的顏色修改
input:disabled {
color:@disabledColor;
opacity: 1;
-webkit-text-fill-color: @disabledColor;//隱藏的樣式
}
14，根據(jù)某個(gè)屬性移除數(shù)組中的某個(gè)值
arr1 = arr.filter(e=>e.name !== 'ss');// 返回name 不等于ss的
