基于vue2+elementUI年份范围选择器

基于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,
                                isDisabled:
                                    compareNum && (compareNum - maxRange > item || compareNum + maxRange < item),
                                selected: item === endYear || item === startYear
                            }"
                            @click="onClickItem(item)"
                            @mouseover="onHoverItem(item)">
                            {{ item }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div slot="reference">
            <div
                ref="yearPicker"
                @mouseenter="startShowYear && endShowYear && (showClearIcon = true)"
                @mouseleave="showClearIcon = false"
                class="yearPicker el-date-editor el-range-editor el-input__inner el-date-editor--daterange el-range-editor--small">
                <i class="el-input__icon el-range__icon el-icon-date"></i>
                <input
                    class="_inner range_input"
                    ref="inputLeft"
                    type="text"
                    name="yearInput"
                    :placeholder="startPlaceholder"
                    v-model="startShowYear"
                    @focus="onFocus"
                    @keyup="handleInput('start')" />
                <span class="el-range-separator">{{ sp }}</span>
                <input
                    class="_inner range_input"
                    ref="inputRight"
                    type="text"
                    name="yearInput"
                    :placeholder="endPlaceholder"
                    v-model="endShowYear"
                    @focus="onFocus"
                    @keyup="handleInput('end')" />
                <i
                    v-if="showClearIcon && clearable"
                    class="el-icon-circle-close clearIcon"
                    @click.prevent="onClickClear()"></i>
            </div>
        </div>
    </el-popover>
</template>

<script>
import moment from 'moment';
import {clickoutside} from '../directives/directives.m.js';
const SELECT_STATE = {
    unselect: 0,
    selecting: 1,
    selected: 2
};
export default {
    name: 'yearPicker',
    directives: {clickoutside},
    computed: {
        oneSelected() {
            return (
                this.curState === SELECT_STATE.selecting && (this.startYear === this.endYear || this.endYear == null)
            );
        },
        leftYearList() {
            return this.yearList.slice(0, 10);
        },
        rightYearList() {
            return this.yearList.slice(10, 20);
        }
    },
    props: {
        sp: {
            default: '至'
        },
        value: {
            default: null
        },
        startPlaceholder: {
            type: String,
            default: '开始年份'
        },
        endPlaceholder: {
            type: String,
            default: '结束年份'
        },
        clearable: {
            type: Boolean,
            default: false
        },
        // 是否需要限制时间跨度 配合maxRange使用
        hasDisabled: {
            type: Boolean,
            default: false
        },
        // 时间跨度 必须与hasDisabled配合使用才生效
        maxRange: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            itemBg: {},
            startShowYear: null,
            endShowYear: null,
            yearList: [],
            showPanel: false,
            startYear: null,
            endYear: null,
            curYear: 0,
            curSelectedYear: 0,
            curState: SELECT_STATE.unselect,
            showClearIcon: false,
            compareNum: 0
        };
    },
    methods: {
        handleInput(type) {
            switch (type) {
                case 'start':
                    if (isNaN(this.startShowYear)) {
                        this.startShowYear = this.startYear;
                        return;
                    }
                    this.startYear = this.startShowYear * 1;
                    break;
                case 'end':
                    if (isNaN(this.endShowYear)) {
                        this.endShowYear = this.endYear;
                        return;
                    }
                    this.endYear = this.endShowYear * 1;
                    break;
            }
            [this.startYear, this.endYear] = [this.endYear, this.startYear];
            this.startShowYear = this.startYear;
            this.endShowYear = this.endYear;
        },
        onHoverItem(iYear) {
            if (this.hasDisabled) {
                if (iYear > this.compareNum + this.maxRange || iYear < this.compareNum - this.maxRange) {
                    return;
                }
            }
            if (this.curState === SELECT_STATE.selecting) {
                const tmpStart = this.curSelectedYear;
                this.endYear = Math.max(tmpStart, iYear);
                this.startYear = Math.min(tmpStart, iYear);
            }
        },
        async onClickItem(selectYear) {
            if (this.hasDisabled) {
                if (
                    this.compareNum &&
                    (selectYear > this.compareNum + this.maxRange || selectYear < this.compareNum - this.maxRange)
                ) {
                    return;
                }
            }
            if (this.curState === SELECT_STATE.unselect || this.curState === SELECT_STATE.selected) {
                this.startYear = selectYear;
                this.curSelectedYear = selectYear;
                this.endYear = null;
                this.curState = SELECT_STATE.selecting;
                if (this.hasDisabled) {
                    this.compareNum = selectYear;
                }
            } else if (this.curState === SELECT_STATE.selecting) {
                this.endShowYear = this.endYear || this.startYear;
                this.startShowYear = this.startYear;
                this.curState = SELECT_STATE.selected;
                await this.$nextTick();
                this.showPanel = false;
                this.$emit('picker-change', [this.startShowYear, this.endShowYear]);
                // this?.$parent?.$parent?.$parent?.$parent?.$parent.clearValidate?.();
            }
        },
        async onFocus() {
            if (this.value?.length) {
                const [first, end] = this.value || [];
                this.startYear = first || null;
                this.endYear = end || null;
                this.curState = SELECT_STATE.selected;
                this.startShowYear = first;
                this.endShowYear = end;
                this.updateYearList();
                this.compareNum = 0;
            }
            await this.$nextTick();
            this.showPanel = true;
        },
        updateYearList() {
            const startYear = ~~(this.curYear / 10) * 10 - 10;
            this.yearList = [];
            for (let index = 0; index < 20; index++) {
                this.yearList.push(startYear + index);
            }
        },
        onClickLeft() {
            this.curYear = this.curYear * 1 - 10;
            this.updateYearList();
        },
        onClickRight() {
            this.curYear = this.curYear * 1 + 10;
            this.updateYearList();
        },
        onClickClear() {
            this.startYear = null;
            this.endYear = null;
            this.startShowYear = null;
            this.endShowYear = null;
            this.curState = SELECT_STATE.selected;
            this.curYear = moment().format('yyyy');
            this.updateYearList();
            this.$emit('picker-change', []);
        },
        onHide() {
            this.startYear = null;
            this.endYear = null;
            this.curState = SELECT_STATE.selected;
            this.curYear = moment().format('yyyy');
            this.updateYearList();
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val?.length === 0) {
                    return;
                }
                const [first, end] = val || [];
                this.startShowYear = first;
                this.endShowYear = end;
            },
            immediate: true,
            deep: true
        },
        startShowYear: {
            handler(val) {
                this.$emit('input', [val, this.endShowYear || '']);
            },
            immediate: true,
            deep: true
        },
        endShowYear: {
            handler(val) {
                this.$emit('input', [this.startShowYear || '', val]);
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        const [startYear, endYear] = this.value || [];
        if (startYear) {
            this.startYear = Number(startYear);
            this.endYear = Number(endYear);
            this.curState = SELECT_STATE.selected;
            this.curYear = startYear;
        } else {
            this.curYear = moment().format('yyyy');
        }
        this.updateYearList();
    },

    mounted() {
        window.Vue = this;
    }
};
</script>
<style lang="scss">
.custom_year_range {
    .floatPanel {
        > div {
            width: 50%;
        }
        padding: 0 16px;
        display: flex;
        background-color: #fff;
        z-index: 2000;
        border-radius: 4px;
        width: 650px;
        height: 250px;
        top: 40px;
        left: -50px;
        .panelContent {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: calc(100% - 70px);
            .oneSelected {
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }
            .startSelected {
                background-color: #f2f6fc;
                border-top-left-radius: 24px;
                border-bottom-left-radius: 24px;
            }
            .endSelected {
                background-color: #f2f6fc;
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }
            .betweenSelected {
                background-color: #f2f6fc;
            }
            .disabledSelect {
                background-color: #f5f5f5;
                cursor: not-allowed;
            }
            > div {
                width: 75px;
                height: 48px;
                line-height: 48px;
                margin: 3px 0;
                text-align: center;
                a {
                    display: inline-block;
                    cursor: pointer;
                    width: 60px;
                    height: 36px;
                    line-height: 36px;
                    border-radius: 18px;
                    &:hover {
                        // color: #4088fe;
                        text-decoration: none;
                        cursor: pointer;
                    }
                }
                a.isDisabled:hover {
                    color: #4088fe;
                    text-decoration: none;
                    cursor: not-allowed !important;
                }
                .selected {
                    background-color: #4088fe;
                    color: #fff;
                    &:hover {
                        color: #fff !important;
                    }
                }
            }
        }
        .panelHead {
            position: relative;
            height: 46px;
            line-height: 46px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                font-size: 16px;
                font-weight: 500;
                padding: 0 5px;
                line-height: 22px;
                text-align: center;
                cursor: pointer;
                color: #606266;
                &:hover {
                    color: #4088fe;
                }
            }
            i {
                position: absolute;
                cursor: pointer;
                &:hover {
                    color: #3e77fc;
                }
            }
        }
        .rightPanel {
            padding-left: 8px;
        }
        .leftPanel .panelHead i {
            left: 20px;
        }
        .rightPanel .panelHead i {
            right: 20px;
        }
    }
    .floatPanel::before {
        content: '';
        height: 100%;
        top: 0;
        position: absolute;
        left: 50%;
        width: 1px;
        border-left: 1px solid #e4e4e4;
    }
    .el-range-separator {
        min-width: 24px;
        border: 1px solid #e4e4e4;
    }
}
</style>
<style lang="scss" scoped>
.yearPicker {
    width: 290px;
    .range_input {
        appearance: none;
        border: none;
        outline: 0;
        padding: 0;
        width: 40%;
        color: #606266;
        line-height: 1;
        height: 100%;
        margin: 0;
        text-align: center;
        display: inline-block;
    }
    .clearIcon {
        height: 32px;
        line-height: 32px;
        position: absolute;
        right: 8px;
        color: #c0c4cc;
        transition: all 0.3;
    }
    .el-range-separator {
        min-width: 24px;
    }
}

 

// 自定义指令
export const clickoutside = {
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding && binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                if (binding.value && binding.value(e)) {
                    binding.value(e);
                }
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    }
};

因为项目工期比较赶，功能可能会存在缺陷，码友们若有发现，请留言告知，感谢！