基于ElementPlus封装的季度选择器组件

在工作中我们常会用 ElementPlus 作为项目的基础 UI 组件，这里面丰富的组件基本能覆盖到大多数场景。在 ElementPlus 文档中我们可以知道 Form 表单组件中 DatePicker 日期选择器可以通过 type 传入不同的单位来选择不同日期单位的日期时间选择器组件。 type= week | month | year | dates 但是如果要支持根据季度单位来选择，那该怎么办？ 今天就来介绍下如何基于 ElementPlus 封装一个季度选择器组件

封装组件思路

通过查看 DatePicker 组件源码可以了解到它是基于 el-tooltip 组件开发的，我们这里可以考虑使用 el-popover(底层也是 el-tooltip 组件)做弹出框，弹出内容自定义为季度选择，触发部分采用 el-input。点击 el-input 触发自定义弹出框。因此组件基础框架已经很明显了

<ElPopover ref="quarterPopover" :visible="pickerVisible" trigger="click"><template #reference><ElInputclass="el-date-editor":prefix-icon="Calendar"v-model="displayValue"@click="pickerVisible = true"></ElInput></template><div class="el-date-picker"><div class="el-date-picker__header"></div><div class="el-picker-panel__content"></div></div>
</ElPopover> 

剩下的就是完善弹出框内容和交互，具体细节可查看源码及源码中注释

源码展示

<template><ElPopoverref="quarterPopover":visible="pickerVisible"trigger="click"popper-class="quarter-popover el-date-picker"transition="el-zoom-in-top":width="width"><template #reference><ElInputclass="el-date-editor":prefix-icon="Calendar":clearable="clearable"v-model="displayValue":placeholder="placeholder"@click="pickerVisible = true"@clear="clearModelValue"></ElInput></template><div v-click-outside="closePopover" class="el-date-picker"><div class="el-date-picker__header el-date-picker__header--bordered"><span role="button" c