el-date-picker二次封装 自定义右侧图标

这次的封装兼容日期范围选择器和日期时间范围选择器

element里选择器长这样

（日期）

（日期时间）

而设计图需要实现这样的效果

DOM部分

<el-date-picker
      class="lj-date-range-picker"
      v-model="dateTime"
      :type="type"
      range-separator="~"
      :format="format"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder" />
    <svg-icon
      v-show="isIconShow"
      class="date-icon"
      name="ic--date"
      width="17px"
      height="16px"></svg-icon>

然后我们需要把原来的icon隐藏，再通过定位把自定义图标放到合适的位置，这里我是放在了公共样式里，因为其他组件有用到，正常放在封装的文件下就行了

.date-container {
  position: relative;

// 日期选择器隐藏图标（这个例子里用不到）
  .lj-date-picker {
    .el-input__prefix {
      display: none;
    }
  }
// 日期范围选择器隐藏图标
  .el-range__icon {
    display: none;
  }
  .date-icon {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}

这时当组件内有值就会出现鼠标划入时清除图标和自定义图标重叠的现象

所以我们要加两个事件，使得鼠标移上去后只显示清除图标

const isIconShow = ref(true)
  // 鼠标离开
  const setDateIcon = () => {
    isIconShow.value = true
  }
  // 鼠标移入
  const removeDateIcon = () => {
    if (dateTime.value) {
      isIconShow.value = false
    }
  }

到这里就差不多了，我这边还对组件的宽度做了自适应，整体代码如下：

<template>
  <div class="date-container" @mouseover="removeDateIcon" @mouseleave="setDateIcon">
    <el-date-picker
      class="lj-date-range-picker"
      v-model="dateTime"
      :type="type"
      range-separator="~"
      :format="format"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder" />
    <svg-icon
      v-show="isIconShow"
      class="date-icon"
      name="ic--date"
      width="17px"
      height="16px"></svg-icon>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'

  const props = withDefaults(
    defineProps<{
      // 固定名称 modelValue
      modelValue: any
      type?: string // daterange-日期  datetimerange-日期时间
      format?: string // YYYY-MM-DD -日期  YYYY-MM-DD HH:mm -日期时间
      placeholderText?: string
      startPlaceholder?: string
      endPlaceholder?: string
    }>(),
    {
      type: 'daterange',
      placeholderText: '请选择',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
      format: 'YYYY-MM-DD',
    },
  )

  const emits = defineEmits(['update:modelValue'])
  const dateTime = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  const isIconShow = ref(true)
  // 鼠标离开
  const setDateIcon = () => {
    isIconShow.value = true
  }
  // 鼠标移入
  const removeDateIcon = () => {
    if (dateTime.value) {
      isIconShow.value = false
    }
  }

  const dataPickerWidth = computed(() => {
    if (props.type === 'datetimerange') {
      return 'var(--search-input-width-2)'
    } else {
      return 'var(--search-input-width-1)'
    }
  })
</script>

<style scoped lang="less">
  :deep(.el-range-editor.el-input__wrapper) {
    width: v-bind(dataPickerWidth);
    .el-range-input {
      width: 45%;
    }
  }
</style>

父组件调用的时候传入需要传的值就行

<lj-date-range-picker v-model="value2" />