发表于： 2019-10-08 23:09:25
1 810
今天完成的事情：
1.把编辑页面的图片弄好了，设置了一个展示原来图片的input：file，如果想要修改，则需要点击按键先将此图删除，然后才会出现添加新图片的按键：
<div>
<span class="span">配图</span>
<input type="button" :value="valueImg" @click="delImg()" />
<img :src="this.obj.img" v-if="initialImg" class="viewImg" />
<el-upload
action="/api/a/u/img/{module}"
list-type="picture-card"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
v-if="!initialImg"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
export default {
name: "edit",
props: {
editID: "number"
},
data() {
return {
valueImg: "删除原本图片",
initialImg: true,
methods: {
delImg() {
this.initialImg = !this.initialImg;
if (!this.initialImg) {
this.valueImg = "恢复原本图片";
} else {
this.valueImg = "删除原本图片";
}
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.imgUrl = res.data.url;
},
handleRemove(file, fileList) {},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
editData() {
if (this.initialImg == false) {
this.obj.url = this.imgUrl;
}
const r = confirm("确定修改？");
if (r) {
this.axios({
url: `/a/u/article/${this.$store.state.vueId}`,
method: "put",
params: {
title: this.obj.title,
status: this.obj.status,
img: this.obj.url,
content: this.obj.content,
url: this.obj.url,
createAt: this.obj.createAt,
type: this.obj.type
}
})
.then(res => {
this.$router.push("/hom/pass");
// console.log(res);
})
.catch(err => {
console.log(err);
});
}
}
}
};
2.然后把搜索日期进行了限制，使得开始日期不能超过截止日期，截止日期必须大于等于起始日期：
<span class="demonstration spans">创建日期</span>
<el-date-picker
v-model="starAt1"
type="date"
:picker-options="starttime"
value-format="timestamp"
placeholder="选择日期"
></el-date-picker>
</div>
<span class="spans">—</span>
<div class="block">
<span class="demonstration spans">修改日期</span>
<el-date-picker
v-model="endAt1"
type="date"
:picker-options="endTime"
value-format="timestamp"
placeholder="选择日期"
></el-date-picker>
</div>
</div>
export default {
name: "pass",
//vue刷新页面添加的，刷新页面的代码是在App.vue
inject: ["reload"],
data() {
return {
//开始时间
starttime: {
disabledDate: time => {
if (this.endAt1) {
return time.getTime() > new Date(this.endAt1).getTime();
} else {
// 不能大于当前日期
return time.getTime() > Date.now();
}
}
},
// 结束时间
endTime: {
disabledDate: time => {
if (this.starAt1) {
return (
time.getTime() < new Date(this.starAt1).getTime() // 加- 8.64e7则表示包括当天
);
}
}
},
明天计划：
1.任务6-10算是做完了，接下来就是梳理所学，然后准备复盘ppt了。
返回列表
评论