从实践中汲取经验：我的职场启示录（一）

1、vue中div如何禁止点击事件

重点就是pointer-events 这个属性，能禁用鼠标点击事件

设置元素是否对指针事件做出反应

引用于： https://www.w3school.com.cn/cssref/pr_pointer-events.asp

这样可以通过动态参数判断对点击事件进行禁用

<div :class="[this.type == 'detail' ? 'onlyRead' : '']"></div>

.onlyRead{
     pointer-events: none;
}

2、js随机生成字母

/*
** randomWord 产生任意长度随机字母数字组合
** randomFlag-是否任意长度 min-任意长度最小位[固定位数] max-任意长度最大位
*/  
function randomWord(randomFlag, min, max){
     var str = "",
     range = min,
     arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
      
     // 随机产生
     if(randomFlag){
         range = Math.round(Math.random() * (max-min)) + min;
     }
     for(var i=0; i<range; i++){
         str += arr[Math.round(Math.random() * (arr.length-1))];
     }
     return str;
}

// 使用方法
// 生成3-32位随机串：randomWord(true, 3, 32)
// 生成43位随机串：randomWord(false, 43)

3、javascript解决数组中对象相同的key值合并到新数组中

const oldData = [
    { id: 1, value: '11' },
    { id: 1, value: '12' },
    { id: 2, value: '22' },
    { id: 2, value: '23' },
    { id: 2, value: '24' },
    { id: 3, value: '33' },
    { id: 3, value: '34' },
    { id: 4, value: '44' }
]

ES6写法

const s = new Set() //实例化对象
oldData.forEach(item => s.add(item.id)) //添加值（Set可以去掉重复数据）
let newData = Array.from({ length: s.size }, () => []) //创建指定长度数组并添值
oldData.forEach(item => {
    let index = [...s].indexOf(item.id) //找到指定下标
    newData[index].push(item) //添加数据
})
console.log(newData)

ES5写法

var s = new Set();
    oldData.forEach(function(item) {
        return s.add(item.id);
    });
    var newData = Array.from({length: s.size}, function() {
        return [];
    });
    oldData.forEach(function(item) {
        var index = $traceurRuntime.spread(s).indexOf(item.id);
        newData[index].push(item);
    });
    return {};

4、js 合并数组对象中的相同项，并统计数量和

let list=[
  {
    id:11,
    name:'apple',
    num:2
  },
   {
    id:11,
    name:'apple',
    num:3
  },
   {
    id:22,
    name:'pig',
    num:2
  },
   {
    id:11,
    name:'apple',
    num:2
  },
]
 
list = list.reduce((obj, item) => {  
  let find = obj.find(i => i.id === item.id)  
 let _d = {  
    ...item,  
    frequency: 1  
  }  
  find ? (find.num+=item.num,find.frequency++ ): obj.push(_d)  
  return obj  
}, [])

5、文字显示不全以省略号的形式呈现

//单行文字显示不全以省略号的形式进行展现
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;

//多行文字显示不全以文字形式进行展现
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

---