常用方法集合

1、label标签

用处1：结合表单控件（checkbox, radio, input(file)）使用，

用法：通过label的for属性，点击label标签，可以直接跳转到for所指定的元素（美化dom显示、利于用户使用）

// 例1
<label for="male">男</label>
<input type="submit" id="male" value="提交">

<label for="female">女</label>
<input type="submit" id="female" value="提交">

1：点击label标签（男，或者女，就可以直接选择radio，等同于直接点击radio）

// 例2
<label for="file">点击上传</label>
<input type="file" id="file" @change="uploadFile" ref="fileInput" style="display: none">

2：页面只显示：点击上传，隐藏掉了input框，点击label标签就就等同于点击input框，美化页面

2、计算几次方

例：2的3次方等于8     

表达式1： 2**3   (对于3**2**3，计算顺序是先计算后面的，在计算前面的， 3**2**3 == 3**8)

表达式2：Math.pow(2, 3)

3、字符串长度显示限制

解决：使用css: 限定宽度，多出去的显示省略号
.group-name {
      overflow: hidden;
      white-space: nowrap; // 强制不换行
      text-overflow: ellipsis;
 }

如果需要换行：注意，一定要指定容器的宽度
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
优化：鼠标移入，显示所有文字，可以使用hover
也可以直接添加一个 title="" 属性，就可以实现

4、math常用函数

Math.max(4,5,63,2.16)  返回最大值
Math.min(4,5,63,2.16)  返回最小值
Math.ceil(2.98)  返回3 Math.ceil(2.002) 返回3  Math.ceil(2.00) 返回
2  返回向上整数
Math.floor(2.98)  返回2 Math.ceil(2.002) 返回2  Math.ceil(2.00) 返回
2  返回向下整数
Math.random()  返回0到1之间随机数
Math.round()  返回四舍五入的整数
Math.pow(2, 3)  返回2的3次方  8

随机生成一个10位数：parseInt((Math.random()*9+1)*Math.pow(10,9))

5、设置路由切换时，携带参数

设置路由元信息meta字段，在切换路由时，都会携带，如果涉及父子路由，会在matched这个数组里面包含这些路由信息

6、剔除数组中重复的对象

arrayUnique2 (arr, id) {
      var obj = {}
      return arr.reduce(function (item, next) {
        obj[next[id]] ? '' : obj[next[id]] = true && item.push(next)
        return item
      }, [])

 }

7、查找一个对象在数组中的索引index

_findIndex (arr, obj) {
      let l = arr.length
      for (let i = 0; i < l; i++) {
        if (arr[i].id === obj.id) {
          return i
        }
      }
      return -1
 }

8、设置蒙层

给body添加样式：
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);
  }
当需要显示蒙层的时候，给页面添加mask样式，并且保留当前页面高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
this.scrollTop = scrollTop
document.body.classList.add('mask')
document.body.style.top = -scrollTop + 'px'
当隐藏蒙层的时候，去除样式，恢复也页面高度
document.body.classList.remove('mask')
document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop

9、隐藏浏览器超出默认滚动条

::-webkit-scrollbar {
    display: none;
  }