vue3.x + elementPlus 封装组件之date-picker时间封装

<template>
  <div>
    <div>
      <div>
        <span>时间选择没时分秒</span>
        <LZDatePicker
          v-model="pickerData.dataTime"
          :default-time="pickerData.dataTime"
          :shortcuts="[]"
          :placeholder="pickerData.placeholder"
          @dataPickerChange="dataPickerChange"
        ></LZDatePicker>
      </div>
      <span>时间选择有时分秒</span>
      <LZDatePicker
        v-model="pickerData.dataTime2"
        :time-type="pickerData.timeType"
        :default-time="pickerData.dataTime2"
        :shortcuts="[]"
        :placeholder="pickerData.placeholder"
        @dataPickerChange="dataPickerChange2"
      ></LZDatePicker>
    </div>
    <div>
      <span>时间快捷选择</span>
      <LZDatePicker
        v-model="pickerData.dataTime3"
        :default-time="pickerData.dataTime3"
        :shortcuts="[1, 5, 10]"
        :placeholder="pickerData.placeholder"
        @dataPickerChange="dataPickerChange3"
      ></LZDatePicker>
    </div>
    <div>
      <span>时间区间选择</span>
      <LZDatePicker
        v-model="pickerData.defaultTimeDbl"
        :shortcuts-dbl="[]"
        range-separator="至"
        is-double-time
        :default-time-dbl="pickerData.defaultTimeDbl"
        @dataPickerChangeT="dataPickerChangeT"
      ></LZDatePicker>
    </div>
    <div>
      <span>时间区间选择有时分秒</span>
      <LZDatePicker
        v-model="pickerData.defaultTimeDbl2"
        :shortcuts-dbl="[]"
        :time-type-dbl="pickerData.timeTypeDbl"
        range-separator="至"
        is-double-time
        :default-time-dbl="pickerData.defaultTimeDbl2"
        @dataPickerChangeT="dataPickerChangeT"
      ></LZDatePicker>
    </div>
    <div>
      <span>时间区间快捷选择</span>
      <LZDatePicker
        v-model="pickerData.defaultTimeDbl3"
        :shortcuts-dbl="[2, 5, 10]"
        range-separator="至"
        is-double-time
        :default-time-dbl="pickerData.defaultTimeDbl3"
        @dataPickerChangeT="dataPickerChangeT"
      ></LZDatePicker>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
// shortcuts  快捷时间选择 例子： :shortcuts="[1, 5, 10]"
const pickerData = reactive({
  timeType: 'datetime', // datetime/date 是否展示时分秒  单个时间展示 默认是展示年月日
  timeTypeDbl: 'datetimerange', // daterange/datetimerange 是否展示时分秒  时间区间展示 默认是展示年月日
  dataTime: '2021-01-01', // 单个时间选择 一定是string类型 只能传这个格式
  dataTime2: '2021-11-01 12:11:11', // 单个时间选择 一定是string类型 只能传这个格式
  dataTime3: '2021-11-01', // 单个时间选择 一定是string类型 只能传这个格式
  defaultTimeDbl: ['2021-01-01', '2021-02-01'],
  defaultTimeDbl2: ['2021-01-01 10:10:10', '2021-02-01 9:10:10'],
  defaultTimeDbl3: ['2021-01-01', '2021-02-01'],
  placeholder: '占位符',
})
export default {
  setup() {
    //   时间修改回调
    const dataPickerChange = (time) => {
      console.log(time)
      //   pickerData.dataTime = time
    }
    const dataPickerChange2 = (time) => {
      console.log(time)
      //   pickerData.dataTime = time
    }
    const dataPickerChange3 = (time) => {
      console.log(time)
      //   pickerData.dataTime = time
    }
    //   时间修改回调
    const dataPickerChangeT = (time) => {
      console.log(time)
    }
    return { pickerData, dataPickerChange, dataPickerChangeT, dataPickerChange2, dataPickerChange3 }
  }
}
</script>

老规矩----前面文章的步骤创建文件导入js等

1.上才艺

<template>
  <el-date-picker
    v-if="!isDoubleTime"
    :model-value="datePickerData.defaultT"
    :value-format="timeType == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
    :type="timeType"
    :format="timeType == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
    :placeholder="placeholder"
    :shortcuts="datePickerData.shortcuts"
    @change="changeData"
  >
  </el-date-picker>
  <el-date-picker
    v-else
    :model-value="datePickerData.dateTimeDbl"
    :default-value="datePickerData.dateTimeDbl"
    :value-format="timeTypeDbl == 'daterange' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
    :type="timeTypeDbl"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :shortcuts="datePickerData.shortcutsDbl"
    @change="changeData"
  >
  </el-date-picker>
</template>
<script>
import { reactive, toRefs, ref, computed } from 'vue'
const datePickerData = reactive({
  defaultT: '',
  dateTimeDbl: [], // 多个默认时间展示
  shortcuts: [], // 默认时间的处理
  shortcutsDbl: [] // 默认时间的处理
})

const initEffect = (props) => {
  const init = () => {
    // 单个时间的数据展示
    if (!props.isDoubleTime) {
      datePickerData.defaultT = props.defaultTime
      const arr = []
      if (!props.shortcuts.length) {
        datePickerData.shortcuts = arr
      } else {
        props.shortcuts.forEach((e) => {
          arr.push(
            {
              text: `前${e}天`,
              value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * e)
                return date
              }
            })
        })
        datePickerData.shortcuts = arr
      }
    } else {
      // 多个时间的快捷选择
      const arr = [new Date(), new Date()]
      if (!props.defaultTimeDbl.length) {
        datePickerData.dateTimeDbl = [new Date(), new Date()]
      }
      if (!props.shortcutsDbl.length) {
        datePickerData.shortcutsDbl = arr
      } else {
        props.shortcutsDbl.forEach((e) => {
          arr.push(
            {
              text: `前${e}天`,
              value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * e)
                return [start, end]
              }
            })
        })
        datePickerData.shortcutsDbl = arr
      }
    }
  }
  return { init }
}
export default {
  props: {
    value: {
      default() {
        return ''
      },
      type: String
    },
    // 是否是时间组合
    isDoubleTime: {
      default() {
        return false
      },
      type: Boolean
    },
    // 单个默认时间展示
    defaultTime: {
      default() {
        return ''
      },
      type: String
    },
    // 多个默认时间展示
    defaultTimeDbl: {
      default() {
        return []
      },
      type: Array
    },
    // 时间类型  datetime  /   date   是否需要时分秒
    timeType: {
      default() {
        return 'date'
      },
      type: String
    },
    // 时间类型  datetime  /   date   是否需要时分秒
    timeTypeDbl: {
      default() {
        return 'daterange'
      },
      type: String
    },
    placeholder: {
      default() {
        return '开始时间'
      },
      type: String
    },
    // 快捷时间的展示 只用传天数  不用就传[]  空数组
    shortcuts: {
      default() {
        return []
      },
      type: Array
    },
    // 快捷时间的展示 只用传天数  不用就传[]  空数组
    shortcutsDbl: {
      default() {
        return []
      },
      type: Array
    }
  },
  emits: ['dataPickerChange', 'input'],
  setup(props, ctx) {
    const { init } = initEffect(props)
    init()
    const changeData = (val) => {
      // const time = []
      console.log(val)
      ctx.emit('dataPickerChange', val)
    }
    return { datePickerData, changeData }
  }
}
</script>

2. 使用