element-plus时间选择器快速筛选（本周，上周，本月，上月，过去x天），选中后并返回text

<el-date-picker
          v-model="rangeValue"
          popper-class="picker-popovers"
          :shortcuts="rangeShortcuts"
          class="timefilter"
          @visible-change="handleVisibleChange"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :prefix-icon="customPrefix"
          value-format="YYYY-MM-DD"
        >
        </el-date-picker>

 import dayjs from 'dayjs'
 const timeText = ref('')

 const customPrefix = shallowRef({
    render() {
      return h('div', timeText.value)
    },
  })
  

const handleVisibleChange = (type) => {
    const btns = document.getElementsByClassName('el-picker-panel__shortcut')
    Array.from(btns).forEach(el => {
      el.addEventListener('click', function(e){
        timeText.value = e.target?.innerText
      })
    })
  }
  

 const rangeShortcuts = ref([
    {
      text: '今天',
      value: () => [dayjs()],
    },
    {
      text: '昨天',
      value: () => [dayjs().subtract(1, 'day')],
    },
    {
      text: '本周',
      value: () => [
        dayjs().startOf('week').add(1, 'days'),
        dayjs().endOf('week').add(1, 'days'),
      ],
    },
    {
      text: '上周',
      value: () => [
        dayjs().subtract(1, 'weeks').startOf('week').add(1, 'days'),
        dayjs().subtract(1, 'weeks').endOf('week').add(1, 'days'),
      ],
    },
    {
      text: '本月',
      value: () => [dayjs().startOf('month'), dayjs().endOf('month')],
    },
    {
      text: '上月',
      value: () => [
        dayjs().subtract(1, 'months').startOf('month'),
        dayjs().subtract(1, 'months').endOf('month'),
      ],
    },
    {
      text: '过去5天',
      value: () => [dayjs().subtract(5, 'day'), dayjs()],
    },
    {
      text: '过去7天',
      value: () => [dayjs().subtract(7, 'day'), dayjs()],
    },
    {
      text: '过去14天',
      value: () => [dayjs().subtract(14, 'day'), dayjs()],
    },
    {
      text: '过去30天',
      value: () => [dayjs().subtract(30, 'day'), dayjs()],
    },
    {
      text: '过去60天',
      value: () => [dayjs().subtract(60, 'day'), dayjs()],
    },
    {
      text: '过去180天',
      value: () => [dayjs().subtract(180, 'day'), dayjs()],
    },
  ])

样式

.timefilter .el-icon {
    @apply ml-6 mr-4;
    white-space: nowrap;
  }