移动端总结

移动端，UI还原很严格，1px都不能差。安装了Sketch，方便定位到元素。
审批主要是详情页展示：

1， 附件logo展示.png
实现方法：

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

遇到的问题：
之前实现方法直接把svg 的src常量定义为 相对路径，导致无法编译。
更改：

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循环导致key一样。
解决办法：修改其中的key值，加个前缀

 :key="'att'+index"

3，
移动端页面过长，超过一屏，多个标题吸顶效果。

蓝色标题吸顶.png
1）监听滚动

mounted() {
  window.addEventListener('scroll', this.handleScroll);
  },
 destroyed(){
    window.removeEventListener('scroll', this.handleScroll);
  }

2）记录每个要吸顶的标题距页面顶部高度

let header = document.getElementsByClassName('info-title');
  // 单个模块区域
 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为页面滚动的监听回调

 handleScroll() {
       // 吸顶元素
      let header = document.getElementsByClassName('info-title');
      let len = header.length;
      // 页面滚动距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      for(let i = 0; i < len; i++) {
       // 滚动距离在两个模块之间
      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元素默认将其最小尺寸设置为其子元素的尺寸，这意味着父元素永远能显示全部子元素，即使这样导致整个页面超过了屏幕。这还overflow个鬼嘛！。因此我们需要覆盖默认的最小尺寸。
解决办法:
给该元素设置最小高度
min-height: 0
5，js中数组判断是否包含某个元素：
1）arr.idnexOf('s') > 0 首次出现的位置
2）find 并没有改变数组原始值。空数组function不执行的。

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

3）findIndex同find，返回元素位置
6，数组深拷贝的方法
1）es6解构：
a = [...b]
7，git 删除远程和本地分支

git branch -a //查看分支
git push origin --delete [name]//删除远程分支
git branch -d [name] //删除本地分支

8，git 基于已有分支创建新分支

cd 项目目录/已有分支
git checkout -b yourbranchname origin/oldbranchname
git push origin yourbranchname

9, 获取当前时间
new Date()
转换成时间戳
(new Date()).valueOf()
new Date().getTime()
10，获取n-m之间随机数
Math.random()*(n+1-m)+m
11，npm run dev报错

image.png
问题原因：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) {});
保存然再次执行 npm run dev
12，页面跳转
1）新窗口跳转

window.open('url');
<a href="http://www.jb51.net" title="脚本之家" target="_blank">

2）本窗口跳转

<a href="http://www.jb51.net" title="脚本之家">
window.location.href="url"

3）返回上一页

window.history.back(-1);返回上一页

13，safari下input disabled时候的颜色修改

input:disabled {  
    color:@disabledColor;
    opacity: 1;
    -webkit-text-fill-color: @disabledColor;//隐藏的样式
}

14，根据某个属性移除数组中的某个值

arr1 = arr.filter(e=>e.name !== 'ss');// 返回name 不等于ss的