前端小笔记

朱雀 2021-12-14 05:17 300阅读 0赞

**目录**

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浏览器最小字体大小限制** ###

![2019070809573095.png][]

### **3、vue 键盘回车事件** ###

**<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>**![20190708095808392.png][]

### **4、vue事件修饰符：.once** ###

### ![20190708095957427.png][]      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 键盘回车事件** ###

![20200302184406243.png][]

<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 为当前值(从第二项开始)

[2019070809573095.png]: /images/20211213/11251b16cba64d409a2140899c2e5835.png
[20190708095808392.png]: /images/20211213/0881de9dc7c04b399d36393962fef38c.png
[20190708095957427.png]: /images/20211213/a46d52f195d6460990819ea60864f418.png
[20200302184406243.png]: /images/20211213/5e9ffafd905c4e46a5bed160152ccf8e.png