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;
评论区