对 Element Plus 日期选择器简易的二次封装

如图

• 通过在 Element Plus 的日期选择器组件中使用 disabled-date 属性，计算可选择的日期。
• 通过 defineEmits，在子组件中定义事件并将选择日期传递给父组件。
• 使用 v-bind="$attrs" 来获取非 props 属性。提高组件的复用性。

代码如下

// 子组件
<template>
  <div class="chooseDate" style="display: flex">
    <div style="margin-right: 20px">
      <el-date-picker
        v-model="startDate"
        :placeholder="startPlaceholder"
        :disabled-date="starDisabledDate"
        v-bind="$attrs.Options"
      />
    </div>
    <div>
      <el-date-picker
        v-model="endDate"
        :placeholder="endPlaceholder"
        :disabled="disabled"
        :disabled-date="endDisabledDate"
        v-bind="$attrs.Options"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const startDate = ref(null)
const endDate = ref(null)
let disabled = ref(true)
const emit = defineEmits(['startDateChange', 'endDateChange'])
const startPlaceholder = '请选择开始日期'
const endPlaceholder = '请选择结束日期'

const starDisabledDate = (tiem) => {
  return tiem.getTime() < Date.now() - 1000 * 60 * 60 * 24
}


const endDisabledDate = (tiem) => {
  if (startDate.value) {
    return tiem.getTime() < startDate.value.getTime() + 1000 * 60 * 60 * 24
  }
}

// 监听开始时间
watch(
  () => startDate.value,
  (newVal) => {
    if (!newVal) {
      endDate.value = null
      disabled.value = true
    } else {
      disabled.value = false
      emit('startDateChange', newVal)
    }
  }
)

// 监听结束时间
watch(
  () => endDate.value,
  (newVal) => {
    if (newVal) {
      emit('endDateChange', {
        startDate: startDate.value,
        endDate: newVal
      })
    }
  }
)
</script>

父组件修改:Options 绑定到 Options 对象，就可通过配置方式修改子组件的属性。

<template>
  <div>
    <chooseDate
      :Options="Options"
      @startDateChange="startDateChange"
      @endDateChange="endDateChange"
    ></chooseDate>
  </div>
</template>

<script setup>
import chooseDate from '@/components/content/chooseDate/chooseDate.vue'
const Options = {
  size: 'large',
  type: 'date'
  //....
}

const startDateChange = (value) => {
  console.log(value)
}
const endDateChange = (value) => {
  console.log(value)
}