基于vue2+elementUI年份范围选择器
2023-12-29 16:20:15
基于vue2+elementUI实现年份范围选择器,支持时间跨度设置。代码如下:
<template>
<el-popover
ref="popover"
placement="bottom"
v-model="showPanel"
popper-class="custom_year_range"
trigger="manual"
@hide="onHide()"
v-clickoutside="
() => {
showPanel = false;
}
">
<div class="_inner floatPanel">
<div class="_inner leftPanel">
<div class="_inner panelHead">
<i class="_inner el-icon-d-arrow-left" @click="onClickLeft"></i>
<span>
{
{ leftYearList[0] + '年 ' + '- ' + leftYearList[9] + '年' }}
</span>
</div>
<div class="_inner panelContent">
<div
:class="{
oneSelected: item === startYear && oneSelected,
startSelected: item === startYear,
endSelected: item === endYear,
betweenSelected: item > startYear && item < endYear,
disabledSelect: compareNum && (compareNum - maxRange > item || compareNum + maxRange < item)
}"
v-for="item in leftYearList"
:key="item">
<a
:class="{
cell: true,
_inner: true,
selected: item === startYear || item === endYear,
isDisabled: compareNum && (compareNum - maxRange > item || compareNum + maxRange < item)
}"
@click="onClickItem(item)"
@mouseover="onHoverItem(item)">
{
{ item }}
</a>
</div>
</div>
</div>
<div class="_inner rightPanel">
<div class="_inner panelHead">
<i class="_inner el-icon-d-arrow-right" @click="onClickRight"></i>
<span>{
{ rightYearList[0] + '年 ' + '- ' + rightYearList[9] + '年' }}</span>
</div>
<div class="_inner panelContent">
<div
:class="{
startSelected: item === startYear,
endSelected: item === endYear,
betweenSelected: item > startYear && item < endYear,
disabledSelect: compareNum && (compareNum - maxRange > item || compareNum + maxRange < item)
}"
v-for="item in rightYearList"
:key="item">
<a
:class="{
cell: true,
_inner: true,
文章来源:https://blog.csdn.net/fanlc8888/article/details/135289635
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!