匹配开头和结尾+路由冗余的问题+vue日期组件

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()or this.$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
          }
        }
      },