//组件templatedivclassquarterdivclassinput-wrapidcloseIdmouseoverhandlerclick.stopbtn:style{color:colorItem}iclassel-icon-date/i{{seasonValue}}iclassel-icon-circle-close:style{display:displayShow}click.stopclose/i/divdiv v-showshowSeasonrefshowsclassselectPopdiv v-for(item, index) in timeList:keyindexstylewidth: 47%; height: 140px;templatedivclasscard-headerel-row stylewidth: 100%; height: 100%;el-col:span6styleheight: 100%; text-align:leftdivclassel-icon-d-arrow-leftv-showprevShow(index)clickprev(item)stylewidth: 16px;cursor: pointer; /div/el-colel-col:span12divclasstext-yearstyletext-align:center{{item.year}}/div/el-colel-col:span6styleheight: 100%; text-align:rightdivclassel-icon-d-arrow-rightv-shownextShow(index)clicknext(item)stylewidth: 16px;cursor: pointer; /div/el-col/el-row/div/templatedivclasstext-itemstyletext-align:center;el-button typetextsizemediumclassno-choose:class{choose: item.QOneSelect}stylecursor: pointer;width:46%; float:left;clickselectSeason(index, 1, 第一季度)第一季度/el-buttonel-button typetextsizemediumclassno-choose:class{choose: item.QTwoSelect}stylecursor: pointer;float:right;width:46%;clickselectSeason(index, 2, 第二季度)第二季度/el-button/divdivclasstext-itemstyletext-align:center;el-button typetextsizemediumclassno-choose:class{choose: item.QThreeSelect}stylecursor: pointer;width:46%;float:left;clickselectSeason(index, 3, 第三季度)第三季度/el-buttonel-button typetextsizemediumclassno-choose:class{choose: item.QFourSelect}stylecursor: pointer;float:right;width:46%;clickselectSeason(index, 4, 第四季度)第四季度/el-button!----/div/div/div/div/templatescriptexportdefault{computed:{prevShow(){return(data){//右边部分年份左箭头显示判断if(data1this.timeList[1].year-this.timeList[0].year1){returnfalse;}else{returntrue;}};},nextShow(){return(data){//左边部分年份右箭头显示判断if(data0this.timeList[1].year-this.timeList[0].year1){returnfalse;}else{returntrue;}};},},data(){return{showSeason:false,//是否显示选择季度面板year:newDate().getFullYear(),//默认当前年seasonValue:请选择季,//input中显示的内容time:{stTime:,edTime:,},colorItem:#c0c4cc,displayShow:none,timeList:[{year:newDate().getFullYear()-1,QOneSelect:false,QTwoSelect:false,QThreeSelect:false,QFourSelect:false,},{year:newDate().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.displayShownone;}else{this.displayShowblock;}},text(){document.addEventListener(click,(e){if(this.$refs.shows){letselfthis.$refs.shows.contains(e.target);if(!self){this.showSeasonfalse;}}});},btn(){this.showSeason!this.showSeason;//再次打开的时候回显上次选中的 必须是之前选过而非首次打开if(this.showSeasonthis.firstSelectQuarterthis.secondSelectQuarter){constnameOnethis.transQuarter(this.firstSelectQuarter);this.timeList[this.firstIndex][nameOne]true;constnameTwothis.transQuarter(this.secondSelectQuarter);this.timeList[this.secondIndex][nameTwo]true;}},close(){this.seasonValue请选择;this.showSeasonfalse;},//年向前prev(obj){obj.year-1;// this.year this.year - 1;},//年向后next(obj){obj.year1;// this.year this.year 1;},//选择季度处罚selectSeason(index,quarterNum,quarterString){//每选中一次计数器加一 计数器是2的时候重置计数器this.selectNum1;//非首次打开 会回显上次选中的结果再次选中会清空上次选中this.timeList.forEach(item{item.QOneSelectfalseitem.QTwoSelectfalseitem.QThreeSelectfalseitem.QFourSelectfalse})//将选中的季度项改变颜色constattNamethis.transQuarter(quarterNum);this.timeList[index][attName]true;//选中赋值constselectValuethis.timeList[index].year.toString()quarterString;constselectQuarterquarterNum;constselectIndexindex;if(this.selectNum1){//打开选择框选中第一个季度项赋值this.firstSelectselectValue;this.firstSelectQuarterselectQuarter;this.firstIndexselectIndex;}else{//打开选择框选中第二个季度项赋值this.secondSelectselectValue;this.secondSelectQuarterselectQuarter;this.secondIndexselectIndex;}//当计数器为2时,说明已经选中了两个季度,比较两次选中的值 进行赋值if(this.selectNum2){//索引小的为选择框左边 索引大的为选择框右边if(this.firstIndexthis.secondIndex){//从左往右选直接拼接this.seasonValuethis.firstSelect - this.secondSelect;}elseif(this.firstIndexthis.secondIndex){//从右往左选反过来拼接this.seasonValuethis.secondSelect - this.firstSelect;}else{//索引一样说明两次选的是同一边 须比较两次选的季度值的大小if(this.firstSelectQuarterthis.secondSelectQuarter){this.seasonValuethis.firstSelect - this.secondSelect;}else{this.seasonValuethis.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.showSeasonfalse;this.selectNum0;// this.timeList.forEach(item {// item.QOneSelect false// item.QTwoSelect false// item.QThreeSelect false// item.QFourSelect false// })},transQuarter(quarterNum){letname;switch(quarterNum){case1:nameQOneSelect;break;case2:nameQTwoSelect;break;case3:nameQThreeSelect;break;case4:nameQFourSelect;break;}returnname;},},};/scriptstyle langscssscoped.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:02px 12px0rgba(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 getQuartergetQuarter/QuarterRange//获取季度子组件传回的数据getQuarter(val){console.log(季节,val);},