vue3.x + elementPlus 封装组件之time-picker 级联选择器

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

1. 上才艺

<template>
  <el-time-select
    v-if="step"
    :model-value="valueStep"
    :start="stepList.start"
    :step="stepList.step"
    :end="stepList.end"
    placeholder="选择时间"
    @change="changeStep"
  />
  <!--   :picker-options="timeOptions" -->
  <el-time-picker v-else-if="!isDoubleTime" :model-value="value" :default-value="defaultTime" placeholder="选择时间" @change="change" />
  <el-time-picker
    v-else
    :model-value="valueDbl"
    :default-value="defaultTimeDbl"
    is-range
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    @change="changeDbl"
  />

</template>

<script>
export default {
  props: {
    // 是否步长
    stepList: {
      default() {
        return {
          start: '00:00',
          step: '00:05',
          end: '24:00'
        }
      },
      type: Object
    },
    // 是否步长
    step: {
      default() {
        return false
      },
      type: Boolean
    },
    // 是否展示两个时间
    isDoubleTime: {
      default() {
        return false
      },
      type: Boolean
    },
    // 两个时间的默认数据展示
    defaultTimeDbl: {
      default() {
        return []
      },
      type: [Array, Date]
    },
    valueDbl: {
      default() {
        return []
      },
      type: [Array, Date]
    },
    // 默认时间和步长
    timeOptions: {
      default() {
        return {
          start: '08:30',
          step: '00:15',
          end: '18:30'
        }
      },
      type: Object
    },
    value: {
      default() {
        return ''
      },
      type: String
    },
    // 单个时间的默认数据展示
    defaultTime: {
      default() {
        return ''
      },
      type: [String, Date]
    },
    // 有步长的
    valueStep: {
      default() {
        return ''
      },
      type: String
    },
    // 单个时间的默认数据展示
    defaultTimeStep: {
      default() {
        return ''
      },
      type: String
    }
  },
  emits: ['dataTimeChange', 'dataTimeChangeDbl', 'dataTimeChangeStep'],
  setup(props, ctx) {
    const change = (value) => {
      ctx.emit('dataTimeChange', value)
    }
    const changeDbl = (value) => {
      ctx.emit('dataTimeChangeDbl', value)
    }
    const changeStep = (value) => {
      ctx.emit('dataTimeChangeStep', value)
    }
    return { change, changeDbl, changeStep }
  }
}
</script>

2.使用

 <div>时分秒</div>
    <div>
      <span>时分秒选择</span>
      <MjbDateTime
        v-model="pickerData.dateTime"
        :default-time="pickerData.dateTime"
        :placeholder="pickerData.placeholder"
        @dataTimeChange="dataTimeChange"
      ></MjbDateTime>
    </div>
    <div>
      <span>时分秒区间选择</span>
      <MjbDateTime
        v-model="pickerData.dateTime2"
        is-double-time
        :default-time-dbl="pickerData.dateTime2"
        @dataTimeChangeDbl="dataTimeChange2"
      ></MjbDateTime>
    </div>
    <div>
      <span>时分秒选择步长</span>
      <MjbDateTime
        v-model="pickerData.dateTime3"
        :default-time-step="pickerData.dateTime3"
        :is-double-time="false"
        :step-list="pickerData.stepList"
        step
        @dataTimeChangeStep="dataTimeChangeStep"
      ></MjbDateTime>
    </div>


<script>
import { reactive, toRefs } from 'vue'
// shortcuts  快捷时间选择 例子： :shortcuts="[1, 5, 10]"
const pickerData = reactive({
  // 时分秒数据
  dateTime: new Date(2020, 9, 10, 18, 30),
  dateTime2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
  dateTime3: '08:30',
  stepList: {
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }
})
export default {
  setup() {

    //   时间修改回调
    const dataTimeChange = (time) => {
      console.log(time)
    }
    //   时间修改回调
    const dataTimeChange2 = (time) => {
      console.log(time)
    }
    //   时间修改回调
    const dataTimeChangeStep = (time) => {
      console.log(time)
    }
    return {  dataTimeChange, dataTimeChange2, dataTimeChangeStep }
  }
}
</script>