“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”
1.重置滚动条到底部
聊天消息数量增多,滚动条,需自动滚动到底部,提升用户体验
核心代码:
this.$refs.list.scrollTop = this.$refs.list.scrollHeight
注意,vue中的dom更新是异步的, 这样只能在发送消息前重置,用nextTick解决
完整代码示例:
html: 列表容器
<div ref="list" class="chat-list"> </div>
js: 重置代码
// 重置到底部
resetEnd () {
this.$nextTick(() => {
this.$refs.list.scrollTop = this.$refs.list.scrollHeight
})
},
后续监听服务器消息列表,调用此函数,以及用户发送消息后调用此函数
2.防止小键盘弹起,引起底部固定定位的元素被顶起
示例:
html:
<div class="address-bottom" v-show="isShow">
<button class="delete" v-if="showDelete">删除</button>
<button class="save">保存</button>
</div>
js:
data() {
return {
// 保存初始屏幕高度
clientHeight:document.documentElement.clientHeight,
// 底部按钮元素是否展示
isShow:true,
},
mounted(){
// 小键盘弹起时,隐藏底部按钮,防止按钮被顶起
window.onresize = ()=>{
if(this.clientHeight>document.documentElement.clientHeight){
this.isShow=false
}else{
this.isShow=true
}
}
}
3.小于12px的文字
缩放
// 10px文字
.mini-10{
font-size: 12px;
transform: scale(0.83);
white-space: nowrap;
}
4.处理文件流
有时候出于安全考虑,后端不会直接返回给我们图片的url地址,而是一个文件对象,我们需要再调一个下载文件接口,通过鉴权的方式下载(携token),防止泄露
此时:需要前端做一些额外的配置
- 正常情况下axios 不会处理二进制数据，即会去接收但是不会去处理 在文件下载接口配置 responseType:'blob' 以声明返回blob格式
// 文件下载
export const reqDownload = (params) => {
return request({
method: 'get',
url: '/file/download',
responseType:'blob',
params,
})
}
- 二进制流转为 URL
const url = await reqDownload({filePath:res.data.signImage})
const blob = new Blob([url.data]) // res.data 为接口返回的数据
const img = URL.createObjectURL(blob) // 生成一个 Blob URL
this.url = img
这时候后端返回的文件流就会被保存在内存里，而生成的URL 就是文件流在内存中的地址（这个地址为临时的，浏览器在 document 卸载时，会自动释放它们）
展示已经完毕,如果要通过链接下载可用如下方案
const fileName = 'xxxx.xls' // 文件名+后缀
const listNode = document.createElement("a")
listNode.download = fileName
listNode.style.display = "none"
listNode.href = URL // 文件流生成的url
document.body.appendChild(listNode)
listNode.click() // 模拟在按钮上实现一次鼠标点击
URL.revokeObjectURL(listNode.href) // 释放 URL 对象
document.body.removeChild(listNode) // 移除 a 标签
5.处理img标签在src为空的时候出现边框
img[src=""],
img:not([src]){
opacity:0;
}
