滚动条样式
例子:
/*滚动条样式*/
.innerbox::-webkit-scrollbar {
width: 4px;
/*height: 4px;*/
}
.innerbox::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
兼容ie问题
initial
initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）
edg中的ie兼容调试
%systemroot%\system32\f12\IEChooser.exe
IE10+支持placeholder属性，它的表现与其它浏览器也不一致
•IE10+里鼠标点击时（获取焦点）placeholder文本消失 •Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失
textarea在ie下和谷歌下的显示不同(饿了么ui为例)
.el-textarea__inner {
overflow-y: auto;
}
心得
开启项目前做好充足的准备:
| 准备点 | 要求 | |
|---|---|---|
| 整个项目的基础配置 开发 / 测试/ 生产 环境的配置等等 | ||
| 全局样式的编写 , 字体 ,字号, 行间距 , 常用样式, 使用scss变量先声明 | ||
| 全局加载的引入 | ||
| 全局提示的引入 | ||
| 全局暂无数据的样式使用 | ||
| 编写代码尽量组件化 , 多去抽离组件 , 组件与组件之间低内聚 高耦合 |
前端文件流下载
关于前端文件流的下载, 项目中遇到很多次了, 一直没有一次归纳.
这其中又分为两种方式 一种是get下载方式, 一种是post方式, 下面依次介绍这两种方式的优缺点.........
| 请求方式 | 优点 | 缺点 |
|---|---|---|
| get 请求 | 简单粗暴, 直接在标签调用即可 | 如果url要鉴权 , 可能无法鉴权, 鉴权困难 |
| post 请求 | 实现比较复杂 | |
const action = `/api/user-service${api}?${qs.stringify(params)}`;
window.open(action, '_target');
而使用post方法下载
var blob = new Blob(['后台返回的二进制文件'],{type : '该文件是什么类型的文件(MIME)'});
常用的文件类型有(MIME),根据需要返回怎样的文件,就填写怎样的MIME类型,也可以不写,写的话指定了下载的文件格式,不写,文件是什么格式,下载就是什么格式,根据项目需求.
一定要在请求的res里清楚的拿到二进制流文件，一般是res或者res.data,可以console.log打印试试。
拿数据时，切记设置post请求的 responseType: ‘blob’,(经常忘记) 还有需要注意的是, 这个要'blob'这个字符串, 而不是一个Blob对象....., 这个问题也让我犯错了几次. 请求拿到后，创建blob对象要知道文件具体格式，如上所列，如果是excle则，
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel',
})
还有需要注意的是, 如果项目中使用mock来拦截数据, 那么会使项目死掉, 因为该返回并不是字符串, 结合axios的使用都会发生这样的事情, 不知道能否去判断和去配置.
最后使用 window.URL.createObjectURL(blob)来将 得到的blob对象来进行 URL转换 , 然后通过js来点击调用下载.
/**
* 导出
*/
exportExcleFun() {
axios({
method: 'post',
url: '/api/lostFound-service/travel/deposit/export',
responseType: 'blob',
data: this.model,
})
.then((res) => {
// console.log(res.data);
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel',
});
const url = window.URL.createObjectURL(blob);
this.download(url, '物品寄存列表');
// window.location.href = url;
});
},
/**
* post方式导出。
* @param {blob路径} blobUrl
* @param {*} name
*/
download(blobUrl, name) {
const link = document.createElement('a');
link.style.display = 'none';
link.href = blobUrl;
link.download = `${name}.xlsx`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(href); //释放掉blob对象
},
使用provide/indject
应用场景: 父组件向子孙组件数据共享(不要破坏单向数据流)
如何具有响应式 : 函数式声明 + 函数式调用 + 计算属性来保护单向数据流
