1.vue3中的reactive不會(huì)自動(dòng)更新視圖,可以在reactive里多添加一層屬性
2.echarts中封裝組件會(huì)公用同一個(gè)id的元素,可以在封裝組件時(shí)多傳入一個(gè)id
3.echarts在初次渲染時(shí)不會(huì)顯示,報(bào)警告,未獲取寬高,需要在初始化表格時(shí)添加配置寬高。
vue中遇到的問(wèn)題
1.設(shè)置下載pdf瀏覽器會(huì)預(yù)覽問(wèn)題
此方法也可解決下載時(shí)的名稱問(wèn)題
//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為后端返回的流數(shù)據(jù)
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) {
// 根據(jù)文件名后綴,獲取contentType
const contentType = getContentType(file.name)
// 調(diào)用授權(quán)接口,獲取到上傳地址
const res = await axios({
headers: { 'X-GW-AccessKey': window._env_.accessKey },
method: 'post',
url: getOssAuth,
data: { fileName: file.name, contentType },
})
// oss返回結(jié)果
const result = res && res.data && res.data.data
if (result) {
// 根據(jù)oss授權(quán)返回的地址,上傳文件
let reader = new FileReader()
return new Promise((resolve, reject) => {
reader.readAsArrayBuffer(file)
reader.onload = async (e) => {
// 將File對(duì)象通過(guò)FileReader讀出轉(zhuǎn)換為Blob二進(jìn)制流對(duì)象
const blob = new Blob([e.target.result])
// 調(diào)用上傳
const response = await axios({
headers: result.uploadHeaders,
method: result.requestMethod,
url: result.serviceUrl,
data: blob,
onUploadProgress: (progressEvent) => {
// 原生獲取上傳進(jìn)度的事件
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,對(duì)url做個(gè)編碼
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
}
小程序中的問(wèn)題
1.scroll-view enable-flex不生效
解決方案:父級(jí)設(shè)置white-space:nowrap 子級(jí)設(shè)置:display:inline-block