一、基础知识
1. 样式引用
(1) 链路式
<link href="<css_path>" type="text/css" rel="stylesheet" />
(2) 嵌入式
直接将样式写在标签内，适合只需少量调整的样式。
<tag-name style="">content</tag-name>
(3) 内嵌式
<style type="text/css">
selector .....
</style>
2. 方法异步
(1) async 关键字
关键字 async 放到函数前面，表示函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行。
(2) await 关键字
关键字 await 通常作用于方法前，表示只有接收到当前的方法返回值才会继续后面代码。
如我们需要用到接口请求结果，但是数据操作并没有放在接口返回事件中，如果没有 await 则会导致数据异步无法获取。
// 无同步效果
function1() {
let result = {}
getUser().then(res => {
result = res.data
})
// 数据异步可能导致无法获取
console.log(result)
}
// 同步效果
async function1() {
let result = {}
// 接口完毕才会执行后续代码
await getUser().then(res => {
result = res.data
})
// 一定能成功打印数据
console.log(result)
}
3. 方法括号
当控键所绑定方法事件不带括号时，默认参数中将包含 event 事件，如果加括号则并不包含，此时如果要使用到 event 则需要手动添加参数。
(1) 页面代码
<!-- 默认带 event -->
<button @click="fun1">按钮 1</button>
<!-- 不带 event -->
<button @click="fun2('123')">按钮 2</button>
<!-- 手动添加 event -->
<button @click="fun3($event, '123')">按钮 3</button>
(2) JS 代码
上述示例中对应的事件方法代码如下：
method: {
fun1(event) {
console.log(event)
},
fun2(data) {
// 无法获取到 event 事件
console.log(data)
},
fun3(event, data) {
console.log(data)
console.log(event)
}
}
二、CSS样式
1. 图片填充
设置 no-repeat 当大小不贴合时不进行拼接， background-size 设置图片 100% 填充。
.img{
background: url("../assets/back.png") no-repeat;
background-size: 100% 100%;
}
2. 块设置圆角
默认的 div 块为直角，通过 border-radius 参数修改为圆角。
.app{
border-radius: 25px;
}
3. 布局填充
Antd 默认布局组件显示为自适应，我们可以设置填充页面， HTML 代码如下：
<div id="home">
<a-layout class="sideBar">
<!-- content -->
</a-layout>
</div>
注意这里必须设置 position 样式布局，直接设置 height: 100% 是不起作用的，具体 CSS 样式如下：
#home{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.sideBar{
height: 100%;
}
4. 表单红点
默认 Antd 表单 item 是没有小红点的，如果某个字段必填，我们需要自定义在页面标签前显示小红点， CSS 样式如下：
.required .ant-form-item-label label::before {
content: '*';
line-height: 1;
display: inline-block;
margin-right: 4px;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
}
在 a-form-item 中引入上述样式:
<a-form-item class="required">
<!-- content -->
</a-form-item>
三、异常处理
1. 控件失效
当按钮设置了浮动导致无法点击只需要添加 z-index: 1 即可。
<a-button type="link"
style="float: left; z-index: 1;"
@click="register"
>注册</a-button>
2. 请求头乱码
在前后端数据通讯中，当后端返回数据的请求头内容在包含中文字符时将会出现乱码问题，因此在传输前需要先通过 URLEncoder.encode() 对数据编码，前端接收到后再对进行相应的解码处理。
后端加密代码如下：
// 加密文件名
String fileName = URLEncoder.encode("测试文件名", "UTF-8");
HttpHeaders httpHeaders = new HttpHeaders();
httpHeaders.add("Content-disposition", "attachment; filename=" + fileName);
前端解密代码如下：
let fileName = res.headers["content-disposition"]
// 解密文件名
fileName = decodeURI(fileName)
四、功能设计
1. 页面监控
通过监控页面关闭操作并作出对应的操作，在需要监控的页面添加如下代码：
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
},
methods:{
beforeunloadHandler(e) {
// 关闭页面后的操作
}
}
2. 回车绑定
通常我们会将回车键与确定按钮进行绑定，用户单击回车等同于点击确认按钮。需要注意一定要在 destroyed() 中销毁事件，实现代码如下：
mounted () {
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
// 页面关闭销毁事件
window.removeEventListener("keydown", this.keyDown, false);
},
methods: {
keyDown(e) {
// Enter 键的 ASCII 是 13
if (e.keyCode === 13) {
// 按下回车执行 ok() 方法
this.ok();
}
},
ok() {
// do something
}
}
