1.vue3中的reactive不会自动更新视图,可以在reactive里多添加一层属性
2.echarts中封装组件会公用同一个id的元素,可以在封装组件时多传入一个id
3.echarts在初次渲染时不会显示,报警告,未获取宽高,需要在初始化表格时添加配置宽高。
vue中遇到的问题
1.设置下载pdf浏览器会预览问题
此方法也可解决下载时的名称问题
//fileName是pdf名称 、filePath是pdf地址
downloadFile_2(fileName, filePath) {
var ajax = new XMLHttpRequest()
ajax.open('GET', filePath, true)
ajax.setRequestHeader('Cache-Control', 'no-cache')
ajax.setRequestHeader('Access-Control-Allow-Origin', '*')
ajax.responseType = 'blob'
ajax.onload = (e) => {
console.log(e)
let res = e.target.response
// let blob = new Blob([res],{type: "application/pdf;charset=UTF-8"}) // 这里的res为后端返回的流数据
let blob = new Blob([res])
let aLink = document.createElement('a')
aLink.download = `${fileName}.pdf` // 下载文件的名字
aLink.href = URL.createObjectURL(blob)
aLink.click()
}
ajax.send()
},
2.前端上传文件慢
使用OSS上传
async function uploadOss(file, callback) {
// 根据文件名后缀,获取contentType
const contentType = getContentType(file.name)
// 调用授权接口,获取到上传地址
const res = await axios({
headers: { 'X-GW-AccessKey': window._env_.accessKey },
method: 'post',
url: getOssAuth,
data: { fileName: file.name, contentType },
})
// oss返回结果
const result = res && res.data && res.data.data
if (result) {
// 根据oss授权返回的地址,上传文件
let reader = new FileReader()
return new Promise((resolve, reject) => {
reader.readAsArrayBuffer(file)
reader.onload = async (e) => {
// 将File对象通过FileReader读出转换为Blob二进制流对象
const blob = new Blob([e.target.result])
// 调用上传
const response = await axios({
headers: result.uploadHeaders,
method: result.requestMethod,
url: result.serviceUrl,
data: blob,
onUploadProgress: (progressEvent) => {
// 原生获取上传进度的事件
if (progressEvent.lengthComputable) {
callback && callback(progressEvent)
}
},
})
const responseCode = response && response.status
// 201代表上传成功
if (responseCode == 201) {
let fileUrl = result && result.fileUrl
const index = fileUrl.lastIndexOf('/')
const fileName = fileUrl.substring(index + 1)
// 如果是word或者excel,对url做个编码
const fileType = getFileType(fileName) && getFileType(fileName)[0] // ['word','docx']这种格式
fileUrl = fileType == 'word' || type == 'excel' ? encodeURIComponent(fileUrl) : fileUrl
const data = {
fileName,
fileUrl,
fileType,
}
resolve(data)
}
return false
}
})
}
return false
}
小程序中的问题
1.scroll-view enable-flex不生效
解决方案:父级设置white-space:nowrap 子级设置:display:inline-block