时间段组件aTime——属性选择系列组件库（design by yRan）

本组件二次封装iview的DatePicker，可以在全局安装了Iview的项目或者局部引入了DatePicker的页面中自由使用。

目录

• 效果展示
• 功能描述
• 结构代码
• 逻辑代码
• 组件应用
• 事件钩子
• github

效果展示

从左到右分别是：属性名、时间选择器

功能描述

1. 属性名和初始时间段均可由父组件传参到子组件
2. 点击“确定”按钮，时间确定，点击“清空”按钮时间清空
3. 左侧有快捷时间段选项，“上个月”/“本月”/“上周”等

结构代码

<template>
  <div class="a-check">
    <Row>
      <Col flex="110px">
        <span class="c-fix-title wt">{
  { attr_name }}</span>
      </Col>
      <!-- 时间 -->
      <Col flex="auto">
        <date-pick type="daterange" :value="datetime" :options="datetimeOption" confirm :clearable="false" :editable="false" split-panels :transfer="false" @on-change="handleDatetime" @on-ok="confirmDatetime" @on-clear="day_clear" @on-clear-shortcut="clearShortCut" placement="bottom-start" placeholder="请选择查询日期范围" style="width: 200px" />
      </Col>
    </Row>
    <Divider />
  </div>
</template>

• datetime：为绑定的时间段

逻辑代码

  components: {
   
    DatePick
  },
  data () {
   
    return {
   
      datetime: deepCopy(this.initDate),
      comDate: deepCopy(this.initDate),
      datetimeOption: {
   
        shortcuts,
        disabledDate (date) {
   
          return date && date.valueOf() > Date.now()
        }
      }
    }
  },
  props: {
   
    attr_name: {
   
      type: String,
      default () {
   
        return '属性名'
      }
    },
    initDate: {
   
      type: Array,
      default () {
   
        return ['', '']
      }
    }
  },
  methods: {
   
    // 日期选择器
    handleDatetime (val) {
   
      this.datetime = val
    },
    confirmDatetime () {
   
      this.comDate = JSON.parse(JSON.stringify(this.datetime))
      this.$emit('getData', this.comDate, this.attr_name)
    },
    day_clear () {
   
      this.datetime = ['', '']
      this.comDate = JSON.parse(JSON.stringify(this.datetime))
      this.$emit('getData', this.comDate, this.attr_name)
    },
    clearShortCut () {
   
      const shortCut = document.querySelectorAll('.ivu-picker-panel-shortcut')
      const len = shortCut.length
      for (let i = 0; i < len; i++) {
   
        shortCut[i].style.background = 'none'
      }
    }
  },
  created () {
   
    setTimeout(() => {
   
      this.datetime = deepCopy(this.initDate)
      this.comDate = deepCopy(this.initDate)
      this.confirmDatetime()
    }, 1000)
  }

• comDate：确认后经处理的时间段数据
• confirmDatetime：确认事件处理
• day_clear：时间段清空事件
• initDate：初始时间段赋值

组件应用

<aTime attr_name="生日" :initDate="init_pBirth" @getData="time_get" />

import aTime from '@/components/attr-check/a-time'

components: {
   
    aTime
}

data () {
   
    return {
   
        init_pBirth: ['', '']
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：attr_name属性名、initDate时间段初始值

事件钩子

// 拿到用户选中的时间段数据
time_get (date, attr_name) {
   
      var content
      var obj = {
   
        beginTime: '',
        endTime: ''
      }
      if (date[0] === '' && date[1] === '') {
   
        content = '不限'
      } else {
   
        content = date[0] + '至' + date[1]
        obj = {
   
          beginTime: date[0],
          endTime: date[1]
        }
      }
      this.previewAttr.some((item) => {
   
        if (item.attr_name === attr_name + ':') {
   
          item.attr_content = content
        }
      })
      switch (attr_name) {
   
        case '生日':
          this.groupObj.pfinfo_attr.p_birth = obj
          break
      }
    }

• time_get ：拿到用户选中的时间段数据

github

完整代码：点击这里