今天完成的事情：
实现了任务6到任务10中的两个功能
1.只有新增页面所有的input表单内容以及图片已经上传之后，点击上传按钮或者点击保存为草稿按钮才会生效。
只要分别绑定好v-model然后在做一个条件判断，比如上传按钮的条件判断：
upLine() {
this.$store.commit('upLine' , this.$store.getters.typeChange)//传入getters中处理好的数据
if(this.$store.state.picPreview && this.$store.state.theTitle && this.$store.state.theContent && this.$store.getters.typeChange >= 0 && this.$store.state.theUrl) { //保证上传的时候各个属性有确定的数据
axios.post('api/a/u/article' , this.$store.state.myFormData)
.then(res => {
if(res.data.code === 0) {
this.$router.push('/article/' + this.$store.state.belickBtn + 1)
alert('上线成功')
}
})
}
},
if直接指向绑定的数值即可，如果存在一些用户输入的数据，则进入条件内。
2.所有的input表单都填写好之后按钮颜色变成可点击的颜色：
<button class="round-md color-white" :class="{usableBtnColor:$store.getters.usableBtnColor == true}" @click="upLine">立即上线</button>
<button class="round-md color-white ml-xs" :class="{usableBtnColor:$store.getters.usableBtnColor == true}" @click="saveDraft">存为草稿</button>
getters: {
typeChange(state) {
if(state.theType == '请选择') {
return ''
}else if(state.theType == '首页banner') {
return 0
}else if(state.theType == '找职位banner') {
return 1
}else if(state.theType == '找精英banner') {
return 2
}else if(state.theType == '行业大图') {
return 3
}
},
usableBtnColor(state , getters) {
if(state.picPreview && state.theTitle && state.theContent && getters.typeChange >= 0 && state.theUrl) {
return true
}
}
}
利用getters，他有部分vue中的计算属性和watch的特性，起到一个监听的作用，同时getters可以直接套娃，在一个getters中可以直接调用另一个getters，如果要在mutations调用getter中的方法，需要在vue中传值。
明天要做的事情：
6-10基本完成了，查漏补缺，修改代码，打包上传服务器。
返回列表
评论