引言
需求如文章标题，查阅资料发现
element-ui并没有做支持这样类型的时间选择器的打算，所以只能手动造轮子。
组件经过一次改版，之前无法进行默认值的设置，后来改造之后，采用双向数据绑定驱动
组件 => 页面；页面 => 组件的方式。
具备功能：默认时间、时间类型（可选）、是否区间（可选）。
正文
- 演示效果
账期 - 季度或者半年类型的时间选择组件 - 区间.gif
账期 - 季度或者半年类型的时间选择组件 - 非区间.gif
- 源码
- 组件
QuarterOrHalfyear.vue
//- 账期 - 季度或者半年类型的时间（区间）选择组件
.quarter-or-halfyear
//- 遮罩，为了点击空白处关闭时间选择框
.mask-block(v-show='showChooseBox', @click.stop='handlerCancel')
//- input 展示框
el-input(
v-model='showName',
@focus='showChooseBox = true',
placeholder='请选择',
size='small'
)
i.el-input__icon.el-icon-date(slot='prefix')
//- 时间选择框
.date-choose-box(
v-show='showChooseBox',
:class='{ "date-choose-box-shot": !isInterval }'
)
//- 左侧
.box-left
.box-year
button.el-picker-panel__icon-btn.el-icon-d-arrow-left(
type='button',
@click='leftYear--'
)
.left-year {{ leftYear }}
button.el-picker-panel__icon-btn.el-icon-d-arrow-right(
type='button',
@click='(leftYear < rightYear - 1 || !isInterval) && leftYear++'
)
.box-choose
.choose-list
.choose-item(
v-for='(item, index) in typeDictionary[dateType]',
:key='index',
:class='{ "choose-item-active": periodDataCopy instanceof Array ? periodDataCopy.some((element) => element === `${leftYear + item.value}`) : periodDataCopy === leftYear + item.value }',
@click='handlerItemClick(`${leftYear + item.value}`, `${leftYear}年${item.name}`)'
) {{ item.name }}
//- 右侧
.box-right(v-show='isInterval')
.box-year
button.el-picker-panel__icon-btn.el-icon-d-arrow-left(
type='button',
@click='rightYear > leftYear + 1 && rightYear--'
)
.left-year {{ rightYear }}
button.el-picker-panel__icon-btn.el-icon-d-arrow-right(
type='button',
@click='rightYear++'
)
.box-choose
.choose-list
.choose-item(
v-for='(item, index) in typeDictionary[dateType]',
:key='index',
:class='{ "choose-item-active": periodDataCopy instanceof Array ? periodDataCopy.some((element) => element === `${rightYear + item.value}`) : periodDataCopy === rightYear + item.value }',
@click='handlerItemClick(`${rightYear + item.value}`, `${rightYear}年${item.name}`)'
) {{ item.name }}
上面代码引用的外部依赖有：
lodash-esmoment
因为我们的业务需求，需要拼接数据格式为
2021Q12021H1，所以 时间类型字典typeDictionary是源码中这样定义的，这个可以根据业务需求自行更改。