匹配开头和结尾+路由冗余的问题+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
          }
        }
      },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容