前端小笔记

目录

 

1、vue改变组件样式

2、chrome浏览器最小字体大小限制

3、vue 键盘回车事件

4、vue事件修饰符：.once

​5、CSS小笔记

设置input框中提示文字的颜色

css鼠标移动上去变手

css剩余宽度高度calc()函数   

点击穿透

6、vue 键盘回车事件

7、JS数组操作

---

1、vue改变组件样式

使用>>>

.box-out >>> .xxxxx组件样式类 { color: red; }

2、chrome浏览器最小字体大小限制

3、vue 键盘回车事件

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

4、vue事件修饰符：.once

5、CSS小笔记

渐变色：background-image: linear-gradient(top,#149DB0 0%, #27d0c7 100%);

设置input框中提示文字的颜色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder

color: #FFF;

css鼠标移动上去变手

cursor:pointer

css剩余宽度高度calc()函数   

 

eg:剩余宽度 width:calc(100% - 10px)

点击穿透

有些时候网页中用到了一些绝对定位的Div，因为需要事先这个Div是隐藏的，但是它所在的位置会遮挡住鼠标点击事件。这个时候可以用CCS3中的pointer-events属性来解决。

//穿透该层

pointer-events:none;

 

6、vue 键盘回车事件

 

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

7、JS数组操作

map: 遍历数组，返回回调返回值组成的新数组
forEach: 无法break，可以用try/catch中throw new Error来停止
filter: 过滤
some: 有一项返回true，则整体为true
every: 有一项返回false，则整体为false
join: 通过指定连接符生成字符串
push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项【有误】
unshift / shift: 头部推入和弹出，改变原数组，返回操作项【有误】
sort(fn) / reverse: 排序与反转，改变原数组
concat: 连接数组，不影响原数组， 浅拷贝
slice(start, end): 返回截断后的新数组，不改变原数组
splice(start, number, value...): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev 为上次化简函数的return值，cur 为当前值(从第二项开始)