前端vue,今天,14天,30天,时间切换

最新推荐文章于 2024-04-02 04:16:21 发布

ZERO_Ins

最新推荐文章于 2024-04-02 04:16:21 发布

阅读量178

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/SallyFateq/article/details/133698698

版权

前端vue,今天,14天,30天,时间切换

在这里插入图片描述

前端样式

<div>
               <span style="margin-left: 10px;font-size: medium" class="options">时间：
                <sapn style="margin-left: 10px" class="option active" @click="changeDays('1')" id="1">今天</sapn>
                <sapn style="margin-left: 10px" class="option" @click="changeDays('2')" id="2">14天</sapn>
                <sapn style="margin-left: 10px" class="option" @click="changeDays('3')" id="3">30天</sapn>
                </span>
              <el-date-picker
                style="width: auto;margin-left: 10px;margin-top: 5px"
                v-model="dateSelection"
                size="mini"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>

定义变量

return {
  timeQuery: {//时间查询参数
        startTime: '',
        endTime: '',
   },
     nowTime: '',//现在时间
      currentTime: '',//当前年月日天时
      fourteenDays: '',//14天
      thirtyDays: '',//30天
      dateSelection: [],//日期选择器
}

Js方法

methods: {
     //查询时间 //异步请求
    async changeDays(days) {
      /*清除样式效果*/
      for (let i = 1; i <= 3; i++) {
        document.getElementById(i.toString()).classList.remove('active');
      }
      /*时间切换*/
      if (days != undefined ){
        document.getElementById(days).classList.add('active');
        this.dateSelection = null;
        this.timeQuery.endTime = this.currentTime;
        if (days == 2) {
          this.timeQuery.startTime = this.fourteenDays;
        }else if (days == 3) {
          this.timeQuery.startTime = this.thirtyDays;
        }else {
          this.timeQuery.startTime = this.currentTime;
        }
      }
      let params = this.urlEncodeObject(this.timeQuery);
      /*发请求(根据自己代码修改)*/  
      const {code, data} = await timeQueryList(params);
      if (code != "200") return;
     //获取到data,根据需求处理数据
    },
    //格式化时间
    formatDate(date) {
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, "0");
      let day = date.getDate().toString().padStart(2, "0");
      let hours = date.getHours().toString().padStart(2, "0");
      let minutes = date.getMinutes().toString().padStart(2, "0");
      let seconds = date.getSeconds().toString().padStart(2, "0");
      return year + "-" + month + "-" + day + "" +hours + ":" + minutes + ":" +seconds;
    },
    //获取当前年月日天时
    getNowYMD() {
      let date = new Date();
      let day = date.getDate();
      this.formatDate(date);
      /*获取当天*/
      this.currentTime = formatDate(date);
      /*获取14天*/
      let fourteenDaysAgo = new Date(date);
      this.fourteenDays = formatDate(fourteenDaysAgo.setDate(day- 14));
      /*获取30天*/
      let  thirtyDaysAgo = new Date(date);
      this.thirtyDays = formatDate( thirtyDaysAgo.setDate(day- 30));
    },
},
mounted() {
  this.changeDays(1);//初始化时间(今天)  
},
  // 侦听器
  watch:{
    /*监听日历选择器值的变化*/
    dateSelection(){
      if (this.dateSelection !== null) {
        this.timeQuery.startTime = this.formatDate(this.dateSelection[0]);
        this.timeQuery.endTime = this.formatDate(this.dateSelection[1]);
        this.changeDays();
      }else{
        this.changeDays(1);
      }
    }
  }