随手封装一个简单的日期组件（基于ele-ui的基础上）

Posted 2021-03-16 Robot666

<template>
    <el-popover placement="left"  trigger="click" v-model="timePopvisible">
      <div style="width:500px" class="new_time">
        <div v-show="!checkout" class="slider_box">
          <el-slider v-model="show_time1" :min=‘1‘ :max=‘10‘ :step="1" :show-tooltip="false"></el-slider>
          <div class="boxlist">
            <span v-for="(item,index) in timeList" :key="index">{{item.text}}</span>
          </div>
        </div>
        <div v-show="checkout">
          <div style="height:20px"></div>
          <el-date-picker v-show="checkout" type="datetimerange" v-model="show_time2" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期" style="width:100%"></el-date-picker>
          <div style="height:20px"></div>
        </div>
        <el-checkbox v-model="checkout">切换模式</el-checkbox>

        <div class="btn_box">
           <el-button type="primary" @click="sureTime(true)">确认</el-button>
          <el-button @click="sureTime(false)">取消</el-button>
           <el-button  @click="clearTime()">清除时间</el-button>
        </div>
      </div>
      <el-tag slot="reference" size="medium" class="tag">{{show_time_text}}</el-tag>
    </el-popover>
</template>

<script>
import moment from "moment";
export default {
  name:‘TimeGroup‘,
 
  data(){
    return{
      timePopvisible:false,
      checkout:false,
      timeList:[
        {
          type:‘MINUTE‘,
          text:‘1时‘,
          duration:60
        },
        {
          type:‘HOUR‘,
          text:‘4时‘,
          duration:4
        },
        {
          type:‘HOUR‘,
          text:‘12时‘,
          duration:12
        },
        {
          type:‘HOUR‘,
          text:‘1天‘,
          duration:24
        },
        {
          type:‘DAY‘,
          text:‘3天‘,
          duration:3
        },
        {
          type:‘DAY‘,
          text:‘5天‘,
          duration:5
        },
        {
          type:‘DAY‘,
          text:‘1周‘,
          duration:7
        },
        {
          type:‘DAY‘,
          text:‘2周‘,
          duration:14
        },
        {
          type:‘DAY‘,
          text:‘1月‘,
          duration:30
        },
        {
          type:‘MONTH‘,
          text:‘3月‘,
          duration:3
        }
      ],
      show_time2:1,
      show_time1:1,
      show_time_text:‘请选择时间‘
    }
  },

 props:["inforNum"],
  methods:{
    // 得到显示的时间和数据
    sureTime (data) {
        this.timePopvisible = false
        if (data) {
          let time ;
          let type = ""
          let duration = ‘‘
          if (this.checkout==false) {
            time = this.show_time1
            if(typeof time === ‘number‘){
              // 从滑动条中得到的数据
              let temp = this.timeList[time - 1]
              this.timeParam =  this.getNewFormatTime(temp.type, temp.duration)
            }else{
              time = 1
              // 从滑动条中得到的数据
              let temp = this.timeList[time - 1]
              this.timeParam =  this.getNewFormatTime(temp.type, temp.duration)
            }
          } else {
            time = this.show_time2
            // 从时间选择器中得到的数据
            let preTime = time[0]
            let abTime = time[1]
            let minutes = moment(abTime).diff(preTime,"minutes")
            let Hours,Days,f,Month;
            if (minutes > 60) {
              Hours = minutes / 60
            }
            if (Hours > 24) {
              Days = Hours / 24
            }
            if (Days>60){
              Month = moment(abTime).diff(preTime,"month")
            }
            if(Month){
              type = "MONTH"
              duration = Month
              f = "YYYY-MM";
            } else if (Days) {
              type = "DAY"
              duration = Days
              f = "YYYY-MM-DD";

            } else if (Hours) {
              type = "HOUR"
              f = "YYYY-MM-DD HH";
              duration = Hours
            } else {
              type = "MINUTE"
              duration = minutes
              f = "YYYY-MM-DD HHmm";
            }
            let endTime = moment(abTime).format(f);
            let startTime = moment(preTime).format(f);
            let showTime = moment(preTime).format(‘YYYY-MM-DD HH:mm‘) + ‘-‘ + moment(abTime).format("YYYY-MM-DD HH:mm");
            let startTimeData = moment(preTime).format(‘YYYY-MM-DD HH:mm‘);
            let endTimeData = moment(abTime).format(‘YYYY-MM-DD HH:mm‘);
            let millisecondStart = moment(preTime).format(‘x‘);
            let millisecondEnd = moment(abTime).format(‘x‘);


              this.timeParam = {
              step:type,
              showTime,
              start:startTime,
              end:endTime,
              duration,
              startTimeData,
              endTimeData,
               millisecondStart,
               millisecondEnd
            }
          }
          this.show_time_text = this.timeParam.showTime
          this.$emit("callBack", this.timeParam);
        }
        // else{
        //   this.$emit("callBack");
        // }

    },

getNewFormatTime(step, duration) {
      /* 根据时间设置startTime和endTime:获取当前时间，往前推一个时间段 */
      /* 传入开始时间和step，得到特定格式的开始和结束时间 */
      const now = new Date();
      let startTime = "";
      let end = moment(now);
      let endTime = "";
      let showTime = "";
      let startTimeData = "";
      let endTimeData = "";
      let f = "";
      let millisecondStart =‘‘;
      let millisecondEnd = ‘‘;
      if (step === "DAY") {
        f = "YYYY-MM-DD";
        endTime = moment(now).format(f);
        startTime = moment(now.setDate(now.getDate() - duration)).format(f);
        showTime = startTime +‘-‘+ endTime;
        startTimeData = startTime;
        endTimeData = endTime
        millisecondStart = moment(now.setDate(now.getDate() - duration)).format(‘x‘);
        millisecondEnd = moment(now).format(‘x‘);
      } else if (step === "HOUR") {
        f = "YYYY-MM-DD HH";
        endTime = moment(now).format(f);
        startTime = moment(now.setHours(now.getHours() - duration)).format(f);
        showTime = startTime+‘:00 -‘+ endTime+‘:00‘;
        startTimeData = startTime+‘:00‘;
        endTimeData = endTime+‘:00‘
          millisecondStart = moment(now.setHours(now.getHours() - duration)).format(‘x‘);
          millisecondEnd = moment(now).format(‘x‘);
      } else if (step === "MINUTE") {
        f = "YYYY-MM-DD HHmm";
        endTime = moment(now).format(f);
        let start = ""
        if (duration === 60) {
          let a = moment(now.setHours(now.getHours() - 1))
          startTime = a.format(f);
          start = a.format(‘YYYY-MM-DD HH:mm‘);
        } else {
          startTime = moment(
            now.setMinutes(now.getMinutes() - duration)
          ).format(f);
          start = moment(now.setMinutes(now.getMinutes() - duration)).format(‘YYYY-MM-DD HH:mm‘);
        }
        showTime = start +‘-‘+ end.format(‘YYYY-MM-DD HH:mm‘);
        startTimeData = start;
        endTimeData = end.format(‘YYYY-MM-DD HH:mm‘)
      }else if(step === "MONTH"){
        f = "YYYY-MM";
        endTime = moment().format(f);
        startTime = moment().subtract(duration, ‘month‘).format(f);
        showTime = startTime +‘-‘+ endTime;
        startTimeData = startTime;
        endTimeData = endTime
          millisecondStart = moment().subtract(duration, ‘month‘).format(‘x‘);
          millisecondEnd = moment().format(‘x‘);
      }
      
      return { 
          step,
          start: startTime,
          end: endTime,
          duration,
          showTime,
          startTimeData,
          endTimeData,
          millisecondStart, //毫秒
          millisecondEnd   ////毫秒
          
      };
      
    },

clearTime(){
      if(this.inforNum){
        let time = this.$timeGroup.methods.getNewFormatTime("MINUTE", this.inforNum);
        this.show_time_text = "请选择时间"
        this.show_time1 = 1
        this.$emit("callBack", time);
        alert(time);
        
        this.timePopvisible = false
      }else {
        let time = this.$timeGroup.methods.getNewFormatTime("MINUTE", 60);
        this.show_time_text = "请选择时间"
        this.show_time1 = 1
        this.$emit("callBack", time);
        this.timePopvisible = false
      }

    }
  }
}
</script>

 

<style scoped>
  .tag{
    cursor: pointer;
    line-height: 32px;
    height: 32px;
    padding: 0 20px;
  }
  .new_time .boxlist{
    margin: -5px 0 30px 0;
    position: relative;
  }
  .new_time .boxlist span{
    display: inline-block;
    width: 55px;
    font-size: 10px;
  }
  .new_time .boxlist span:nth-child(1){
    margin-left: -8px;
  }
  .new_time .boxlist span:nth-child(10){
    display: inline;
    position: absolute;
    right: -47px;
    top:2px;
  }
  .new_time .btn_box{
    text-align: center;
    margin: 20px auto 0;
  }
  .new_time .slider_box{
    padding: 0 6px;
  }
</style>