组件：

<template><div class="quarter"><div class="input-wrap" id="closeId" @mouseover="handler" @click.stop="btn" :style="{color:colorItem}"><i class="el-icon-date"></i>{{seasonValue}}<i class="el-icon-circle-close" :style="{display:displayShow}" @click.stop="close"></i></div><div v-show="showSeason" ref="shows" class="selectPop"><div v-for="(item, index) in timeList" :key="index" style="width: 47%; height: 140px;"><template><div class="card-header"><el-row style="width: 100%; height: 100%;"><el-col :span="6" style="height: 100%; text-align:left"><div class="el-icon-d-arrow-left" v-show="prevShow(index)" @click="prev(item)" style="width: 16px;cursor: pointer; "></div></el-col><el-col :span="12"><div class="text-year" style="text-align:center">{{ item.year }}</div></el-col><el-col :span="6" style="height: 100%; text-align:right"><div class="el-icon-d-arrow-right" v-show="nextShow(index)" @click="next(item)" style="width: 16px;cursor: pointer; "></div></el-col></el-row></div></template><div class="text-item" style="text-align:center;"><el-button type="text" size="medium" class="no-choose" :class="{choose: item.QOneSelect}" style="cursor: pointer;width:46%; float:left;" @click="selectSeason(index, 1, '第一季度')">第一季度</el-button><el-button type="text" size="medium" class="no-choose" :class="{choose: item.QTwoSelect}" style="cursor: pointer;float:right;width:46%;" @click="selectSeason(index, 2, '第二季度')">第二季度</el-button></div><div class="text-item" style="text-align:center;"><el-button type="text" size="medium" class="no-choose" :class="{choose: item.QThreeSelect}" style="cursor: pointer;width:46%;float:left;" @click="selectSeason(index, 3, '第三季度')">第三季度</el-button><el-button type="text" size="medium" class="no-choose" :class="{choose: item.QFourSelect}" style="cursor: pointer;float:right;width:46%;" @click="selectSeason(index, 4, '第四季度')">第四季度</el-button><!--  --></div></div></div></div>
</template>
<script>
export default {computed: {prevShow() {return (data) => {//右边部分年份左箭头显示判断if (data === 1 && this.timeList[1].year - this.timeList[0].year === 1) {return false;} else {return true;}};},nextShow() {return (data) => {//左边部分年份右箭头显示判断if (data === 0 && this.timeList[1].year - this.timeList[0].year === 1) {return false;} else {return true;}};},},data() {return {showSeason: false, //是否显示选择季度面板year: new Date().getFullYear(), //默认当前年seasonValue: "请选择季", //input中显示的内容time: {stTime: "",edTime: "",},colorItem: "#c0c4cc",displayShow: "none",timeList: [{year: new Date().getFullYear() - 1,QOneSelect: false,QTwoSelect: false,QThreeSelect: false,QFourSelect: false,},{year: new Date().getFullYear(),QOneSelect: false,QTwoSelect: false,QThreeSelect: false,QFourSelect: false,},],selectNum: 0, //计数器firstSelect: "", //第一次选中的值拼接firstSelectQuarter: "", //第一次选中的季度firstIndex: "", //第一次选中的是数组中的哪一个secondSelect: "", //第二次选中的值拼接secondSelectQuarter: "", //第二次选中的季度secondIndex: "", //第二次选中的是数组中的哪一个};},created() {// 点击页面的任何一个地方，都隐藏提示this.text();},watch: {//方法1seasonValue(newVal, oldVal) {//  color: #606266;if (newVal == "请选择季") {this.colorItem = "#c0c4cc";} else {this.colorItem = "#606266";}},},methods: {handler() {if (this.seasonValue == "请选择季") {this.displayShow = "none";} else {this.displayShow = "block";}},text() {document.addEventListener("click", (e) => {if (this.$refs.shows) {let self = this.$refs.shows.contains(e.target);if (!self) {this.showSeason = false;}}});},btn() {this.showSeason = !this.showSeason;//再次打开的时候回显上次选中的 必须是之前选过而非首次打开if (this.showSeason && this.firstSelectQuarter && this.secondSelectQuarter) {const nameOne = this.transQuarter(this.firstSelectQuarter);this.timeList[this.firstIndex][nameOne] = true;const nameTwo = this.transQuarter(this.secondSelectQuarter);this.timeList[this.secondIndex][nameTwo] = true;}},close() {this.seasonValue = "请选择";this.showSeason = false;},//年向前prev(obj) {obj.year -= 1;// this.year = +this.year - 1;},//年向后next(obj) {obj.year += 1;// this.year = +this.year + 1;},//选择季度处罚selectSeason(index, quarterNum, quarterString) {//每选中一次计数器加一 计数器是2的时候重置计数器this.selectNum += 1; //非首次打开 会回显上次选中的结果再次选中会清空上次选中this.timeList.forEach(item => {item.QOneSelect = falseitem.QTwoSelect = falseitem.QThreeSelect = falseitem.QFourSelect = false})//将选中的季度项改变颜色const attName = this.transQuarter(quarterNum);this.timeList[index][attName] = true;//选中赋值const selectValue = this.timeList[index].year.toString() + quarterString;const selectQuarter = quarterNum;const selectIndex = index;if (this.selectNum === 1) {//打开选择框选中第一个季度项赋值this.firstSelect = selectValue;this.firstSelectQuarter = selectQuarter;this.firstIndex = selectIndex;} else {//打开选择框选中第二个季度项赋值this.secondSelect = selectValue;this.secondSelectQuarter = selectQuarter;this.secondIndex = selectIndex;}//当计数器为2时,说明已经选中了两个季度,比较两次选中的值 进行赋值if (this.selectNum === 2) {//索引小的为选择框左边  索引大的为选择框右边if (this.firstIndex < this.secondIndex) {//从左往右选直接拼接this.seasonValue = this.firstSelect + " - " + this.secondSelect;} else if (this.firstIndex > this.secondIndex) {//从右往左选反过来拼接this.seasonValue = this.secondSelect + " - " + this.firstSelect;} else {//索引一样说明两次选的是同一边 须比较两次选的季度值的大小if (this.firstSelectQuarter < this.secondSelectQuarter) {this.seasonValue = this.firstSelect + " - " + this.secondSelect;} else {this.seasonValue = this.secondSelect + " - " + this.firstSelect;}}//选择结束,关闭弹窗以及计数器重置处理this.selectEnd();}// this.seasonValue = this.year.toString() + "-" + quarter.toString();// this.showSeason = false;// switch (quarter) {//   case "第一季度"://     this.time.stTime = this.year.toString() + "-01-01" + " " + "00:00:00";//     this.time.edTime = this.year.toString() + "-03-31" + " " + "23:59:59";//     break;//   case "第二季度"://     this.time.stTime = this.year.toString() + "-04-01" + " " + "00:00:00";//     this.time.edTime = this.year.toString() + "-06-30" + " " + "23:59:59";//     break;//   case "第三季度"://     this.time.stTime = this.year.toString() + "-07-01" + " " + "00:00:00";//     this.time.edTime = this.year.toString() + "-09-30" + " " + "23:59:59";//     break;//   case "第四季度"://     this.time.stTime = this.year.toString() + "-10-01" + " " + "00:00:00";//     this.time.edTime = this.year.toString() + "-12-31" + " " + "23:59:59";//     break;// }// this.$emit("getQuarter", this.time); //传值给父组件},selectEnd() {this.showSeason = false;this.selectNum = 0;// this.timeList.forEach(item => {//   item.QOneSelect = false//   item.QTwoSelect = false//   item.QThreeSelect = false//   item.QFourSelect = false// })},transQuarter(quarterNum) {let name = "";switch (quarterNum) {case 1:name = "QOneSelect";break;case 2:name = "QTwoSelect";break;case 3:name = "QThreeSelect";break;case 4:name = "QFourSelect";break;}return name;},},
};
</script>
<style lang="scss" scoped>
.quarter {position: relative;.input-wrap {width: 260px;height: 36px;border: 1px solid #dcdfe6;border-radius: 4px;color: #606266;position: relative;.el-icon-date {color: #c0c4cc;margin-left: 10px;margin-right: 8px;}.el-icon-circle-close {position: absolute;top: 50%;transform: translateY(-50%);right: 10px;color: #c0c4cc;display: none;cursor: pointer;}}.no-choose {color: #606266;}.choose {color: #409eff;}.selectPop {display: flex;justify-content: space-between;width: 400px;position: absolute;background: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border: 1px solid #dfe4ed;border-radius: 4px;color: #606266;padding: 8px 15px 15px 15px;top: 52px;z-index: 10;.card-header {width: 100%;height: 40px;border-bottom: 1px solid #e6ebf5;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;.text-year {font-size: 16px;}}&::before {content: "";border-bottom: 10px solid #dfe4ed;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;left: 13%;-webkit-transform: translateX(-50%);transform: translateX(-50%);top: -8px;border-radius: 5px;}&::after {content: "";border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;left: 13%;-webkit-transform: translateX(-50%);transform: translateX(-50%);top: -6px;border-radius: 5px;}}
}
</style>

使用：

 <QuarterRange @getQuarter="getQuarter"></QuarterRange>//获取季度子组件传回的数据
getQuarter(val) {console.log("季节：", val);
},