小小小小技巧

修改 svg 图片的属性(宽, 高, 颜色)
用IDE 打开目标 svg 图片,修改对象代码的 width 属性, height属性, fill 属性即可。
vue 项目的全局样式文件直接在 main.js 页面使用即可, 比如：import './assets/styles/global.scss';。
热键的绑定, 如果用了封装组件的话，比如 Element UI, 在使用按键修饰符要加上 .native,
比如：<el-form @keyup.enter.native="handleLogin('loginForm'))"> </el-form>。

记住密码功能前端简单的实现方法: 用 cookie 来做, 大概思路就是通过存/取/删 cookie 来实现, 每次进入登录页，先读取 cookie ，如果浏览器中的 cookie 里面有帐号的相关信息，就自动填充到登录框中，存 cookie 是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把帐号信息存到 cookie 中。这里可以用 js-cookie 这个库。主要方法有：

// 引入 js-cookie
import Cookies from 'js-cookie';
// 获取用户存入的 cookie，初始化登录表单
this.loginForm = Cookies.get();
// 登录成功后，存 cookie
  Cookies.set('loginName', that.loginForm.loginName, {
    expires: 7,
    path: '/',
  });

去除 chrome 浏览器记住密码后默认填充的样式。

/* 去掉浏览器默认填充样式 */
     input:-webkit-autofill,
     input:-webkit-autofill:hover,
     input:-webkit-autofill:focus {
       font-size: 22px;
       color: $white !important;

       -webkit-text-fill-color: $white;
       -webkit-transition: background-color 10000s ease-in-out 0s;
       transition: background-color 10000s ease-in-out 0s;
     }

document.documentElement.clientWidth与document.documentElement.clientHeight, window.innerWidth与window.innerHeight, window.outerWidth与window.outerHeight, document.body.clientWidth与document.body.clientHeight, offsetWidth 与 offsetHeight 的区别。

document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条
1
2
document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding
window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。
1
2
window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。

1 2	window.outerWidth = width + padding + border + 纵向滚动条宽度 window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

document.body.clientWidth与document.body.clientHeight：document.body.clientWidth获得的也是可视区域的宽度，但是document.body.clientHeight获得的是body内容的高度，如果内容只有100px，那么这个高度也是 100px,如果想通过它得到屏幕可视区域的宽高，需要样式设置，如下：
1
2
3
4
5
6
7
8
body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}
offsetWidth 与 offsetHeight 返回本身的宽高 + padding + border + 滚动条。

路由的设置应该与要修改的东西解耦，换句话说，就是如果存在一些属性是可以修改的，不是设计在路由参数里面去。

拉平多维数组常用的方法。

const arr = [1, 2, 3, [11, 22, 33, [4, 5, [99, 100]]]]
// 只适用数组内全部是数字的情况
arr.join(',').split(',') 
// ['1', '2', '3', '11', '22', '33', '4', '5', '99', '100']

// 只适用数组内全部是数字的情况
arr.toString().split(',') 
// ['1', '2', '3', '11', '22', '33', '4', '5', '99', '100']

// 使用 flat() 拉平数组过程中，会移除数组的空项：
arr.flat() 
// ['1', '2', '3', '11', '22', '33', '4', '5', '99', '100']

// 递归 1
function flatArr() {
  let res = [];
  for(let i = 0; i < arr.length; i++) {
    if(Array.isArray(arr[i])) {
      res = res.concat(flatArr(arr[i]));
    }else {
      res.push(arr[i]);
    }
  }
  return res;
}
//  ['1', '2', '3', '11', '22', '33', '4', '5', '99', '100']

// 递归 2 
function flatArr(arr) {
  for(let i = 0; i < arr.length; i++) {
    if(arr[i] instanceof Array) {
      parseArr(arr[i], res);
    } else {
      res.push(arr[i])
    }
  }
}
// es6 的扩展运算符  
使用 es6 的扩展运算符，但是扩展运算符一次只能展开一层数组，因此只要数组中海油数组，就使用扩展运算符展开一次。
function flatArr(arr) {
  while(arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}
flatArr([1, 2, 3, [11, 22, 33, [4, 5, [99, 100]]]])  //[1, 2, 3, 11, 22, 33, 4, 5, 99, 100]

// 利用 reduce 递归降纬
// 判断每一项是不是数组。如果是，则进一步递归，直到其不是为止。如果不是，则用新数组接收它。
// reduce
const flatArr = (arr) => arr.reduce((prev, curr, index, list) => {
  if (Array.isArray(curr)) {
    return prev.concat(...flatArr(curr));
  }
  return prev.concat(curr);
}, []);

 flatArr(arr);
//[1, 2, 3, 11, 22, 33, 4, 5, 99, 100]