基于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,