組件：

<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);
},