1、匹配开头和结尾
正则表达式一般比较整个串,无法精确比较结尾,使用ES6新特性
startsWith()
endsWith()
let jpgEnd = file.name.endsWith(".jpg")
let jpegEnd = file.name.endsWith(".jpeg")
url.startsWith('http://') || url.startsWith('https://')
2、路由冗余问题
问题描述:重复点击,多次请求同一路由,重复渲染报错
image.png
原因
this.$router.push()
解决办法:避免重复渲染
const routerRePush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return routerRePush.call(this, location).catch(error => error)
}
- 注意:此处
push
还是replace
需要看你本地路由this.$router.push()
orthis.$router.replace()
使用的是哪个,需要前后一致
3、vue日期组件
<el-form-item label="生效日期 - 失效日期" prop="endDate">
<el-date-picker
v-model="data.startDate"
format="yyyy-MM-dd HH:mm"
type="datetime"
:picker-options="startTime"
placeholder="选择生效日期">
</el-date-picker>
<el-date-picker
v-model="data.endDate"
format="yyyy-MM-dd HH:mm"
type="datetime"
:picker-options="endTime"
placeholder="选择失效日期">
</el-date-picker>
</el-form-item>
startTime:{
// 设置禁用状态,参数为当前日期,要求返回 Boolean
disabledDate:(time)=>{
//如果已经已知结束日期,就把结束日期之后的日期禁用
if(this.data.endDate){
return time.getTime() > new Date(this.data.endDate).getTime() - 24 * 60 * 60 * 1000
}else{
//否则 就把当前日期之后的日期禁用掉
return time.getTime() > new Date() - 24 * 60 * 60 * 1000
}
}
},
endTime:{
disabledDate:(time)=>{
//如果已知开始日期,就把开始日期之前的日期禁用掉
if(this.data.startDate){
return time.getTime() < new Date(this.data.startDate).getTime() + 24 * 60 * 60 * 1000 //- 8.64e7则表示当天
}else{
//否则 就把当前日期之前的日期禁用掉
return time.getTime() < new Date() - 24 * 60 * 60 * 1000
}
}
},