今天完成的事情：
1.完成了根据时间搜索ariticle内容之后，刷新页面保存时间和已经搜索出来的内容，
这个之前做过原理是一样的，把值保存在vuex里面，监听beforeunload事件，在这个事件中设置localStorage（setitem方法）,把需要存储的值保存进去，
在生命周期的created，里面通过getitem方法取得浏览器里面缓存的值然后传递给vuex。在渲染dom的时候会自动渲染出来
created() {
window.addEventListener('beforeunload' , () => {//当浏览器刷新的时候或者关闭的时候把vuex里面需要保存的数据保存到浏览器的缓存里
this.$store.commit('setLocalStorageData')
})
this.$store.commit('localStorageData' , JSON.parse(localStorage.getItem('localStorageData')))//把浏览器缓存中的数据保存到vuex中
},
2.完成了上传图片的进度条，
利用onUploadProgress，
upLoad(state , val) {//上传按钮的功能
var myImage = new FormData()
myImage.append('file' , val[0])//上传上传图片的formdata
state.MultipartFile = myImage
axios.post('api/a/u/img/3' , state.MultipartFile , {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
let complete = (progressEvent.loaded / progressEvent.total * 100).toFixed(0)
state.uploadProgress = complete
}
})
//todo考虑在then中加入一个逻辑，当图片上传之后返回一个数值
.then(res => {
if (res.data.code == 0) {
state.savePic = res.data.data.url
state.piClass = 'width-p100'
state.previewText = false
}
})
},
把值给到state里面的一个对象，在组件里面通过计算属性return出来，然后用watch监听值的变化
computed: {
uploadProgress() {
return this.$store.state.uploadProgress
}
},
watch: {
uploadProgress(val) {
let progressBar = document.getElementById('progressBar')
if(val > 0) {
let progressBarTime = setInterval(() => {
progressBar.style.width = (parseInt(progressBar.style.width) + 2) + '%'
if(parseInt(progressBar.style.width) >= val) {
progressBar.style.width = val + '%'
if(this.$store.state.savePic) {
this.$store.commit('setPicPreview')
clearInterval(progressBarTime)
}
}
}, 5);
}
}
}
然后通过setinterval控制标签的宽度实现平滑的进度条效果，如果不用setinterval的话可能一下就100%了...
3.学习了element-ui
这个属于vue的全家桶里的一个，官方文档介绍的很详细，由于我只是想实现对勾这个样式，我只要选择导入elment-ui的icon部分就行了，
使用起来很方便。
明天要做的事情：
task6-10已经做完了，接下来改进代码然后提交任务，准备学习小程序方面的知识
返回列表
评论