1、时间控件清除时间
问题背景:
改变时间选择需要重新调列表接口,点击清除按钮也需要重新调列表接口
<el-date-picker
v-model="form.groupCreateTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间" @change="changeCreateTime" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
changeCreateTime(val){ //清除时也会触发change事件
if(val){
this.form.startCreateDate = val[0];
this.form.endCreateDate = val[1];
}else {
//点击清除按钮的时候val返回的是null,所以要重新定义时间为空
this.form.startCreateDate = '';
this.form.endCreateDate = '';
this.form.groupCreateTime = []
}
this.list()
},
2、上传图片做限制
<el-upload
class="avatar-uploader"
action="/nursing-gw/mall/ignore/main/addImage/53"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload" :disabled="flag">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//上传的图片大小不超过30kb,图片尺寸1比1
beforeAvatarUpload(file) {
console.log(file.size,'file8888')
const extension = file.type === "image/jpeg" || file.type === "image/png";
const isLt2M = file.size / 1024 < 30;
if(!extension){
this.$message.error("上传的图片只能是 JPG、JPEG、PNG 格式!");
return false;
}else if(!isLt2M) {
this.$message.error("上传的图片大小不能超过 30kb!");
return false;
}else {
//上传图片比例必须是1比1
const isSize = new Promise(function(resolve, reject) {
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == img.height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
this.$message.error('上传的图片必须是1比1的比例!');
return Promise.reject();
});
return isSize;
}
},
3.checkbox组件中的indeterminate 状态(用于全选)
<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox>
checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(啥都没显示)
对于indeterminate和v-model绑定的a和b的值
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾