<!--
*绑定事件@change 返回选择的季节中一天的时间戳
*可传值defaultValue，传递，默认日期（格式：20200400）
*可传值valueArr，传递默认月份
-->
<template>
<div class="quarter-select-box" v-if="choseDateValue == ‘季‘" @click="handleBodyClick(‘in‘)">
<!-- <mark
style="position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
v-show="showSeason"
@click.stop="showSeason=true"
></mark> -->
<el-input placeholder="请选择季度" v-model="showValue" class="select-input" @focus="showSeason=true">
<i slot="prefix" class="el-input__icon el-icon-date"></i>
</el-input>
<i class="el-icon-caret-top" v-show="showSeason"></i>
<transition name="el-zoom-in-top">
<el-card
class="box-card"
v-show="showSeason"
>
<div slot="header" class="clearfix" style="text-align:center;padding:0">
<button
type="button"
aria-label="前一年"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
@click="prev"
></button>
<span role="button" class="el-date-picker__header-label">{{year}}年</span>
<button
type="button"
aria-label="后一年"
@click="next"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
></button>
</div>
<div class="text item" style="text-align:center;">
<el-button
type="text"
size="medium"
style="width:40%;color: #606266;float:left;"
@click="selectSeason(0)"
>春季</el-button>
<el-button
type="text"
size="medium"
style="float:right;width:40%;color: #606266;"
@click="selectSeason(1)"
>夏季</el-button>
</div>
<div class="text item" style="text-align:center;">
<el-button
type="text"
size="medium"
style="width:40%;color: #606266;float:left;"
@click="selectSeason(2)"
>秋季</el-button>
<el-button
type="text"
size="medium"
style="float:right;width:40%;color: #606266;"
@click="selectSeason(3)"
>冬季</el-button>
</div>
</el-card>
</transition>
</div>
</template>
<script>
import dayjs from ‘dayjs‘
export default {
props: {
valueArr: {
default: () => {
return [‘04‘, ‘07‘, ‘10‘, ‘01‘]
},
type: Array
},
defaultValue: {
type: String,
default: ‘20200400‘,
}
},
data() {
return {
showSeason: false,
season: ‘‘,
year: new Date().getFullYear(),
showValue: ‘‘,
choseDateValue: ‘季‘,
clickIn: false
}
},
mounted() {
//全局监听
document.addEventListener("click", this.handleOutClick);
},
beforeDestroy() {
//销毁组件时销毁全局监听
document.removeEventListener("click", this.handleBodyClick);
},
methods:{
//点击里面
handleBodyClick(n) {
if(n == ‘in‘) {
this.clickIn = true
}
},
//点击外面
handleOutClick() {
//关闭弹出框
if(!this.clickIn) {
this.showSeason = false
}
this.clickIn = false
},
one() {
this.showSeason = false
},
prev() {
this.year = this.year * 1 - 1
},
next() {
this.year = this.year * 1 + 1
},
selectSeason(i) {
let that = this
that.season = i + 1
let arr = that.valueArr[i]
const timeNumber = `${that.year}-${arr}-01 00:00:00`
// that.getValue(dayjs(timeNumber).valueOf())
// console.log("季节改变", timeNumber)
this.$emit("change", dayjs(timeNumber).valueOf())
that.showSeason = false
this.showValue = `第${this.season}季度`
// if(this.season == 1){
// this.currLegendTime = moment().month(moment().month()).startOf(‘month‘).format(‘YYYY‘)
// this.currBegin = moment(new Date(‘2020-01‘)).startOf(‘month‘).format("YYYY-MM-DD") //季度第一天
// this.currEnd = moment(new Date(‘2020-03‘)).startOf(‘month‘).format("YYYY-MM-DD") //季度最后一天
// this.historyBegin = moment(new Date(this.year+‘-1‘)).startOf(‘month‘).format("YYYY-MM-DD") //历史第一天
// this.historyEnd = moment(new Date(this.year+‘-3‘)).endOf(‘month‘).format("YYYY-MM-DD")
// }
},
},
watch: {
defaultValue: function(value, oldValue) {
let arr = value
this.year = arr.slice(0, 4)
let str = arr.slice(4, 6)
const timeNumber = `${this.year}-${str}-01 00:00:00`
this.$emit("change", dayjs(timeNumber).valueOf())
let arrAll = this.valueArr
this.showValue = `第${arrAll.indexOf(str) + 1}季度`
}
},
created() {
if (this.defaultValue) {
let value = this.defaultValue
this.year = value.slice(0, 4)
let str = value.slice(4, 6)
const timeNumber = `${this.year}-${str}-01 00:00:00`
// console.log("默认值", this.defaultValue, 1, timeNumber)
this.$emit("change", dayjs(timeNumber).valueOf())
let arrAll = this.valueArr
this.showValue = `第${arrAll.indexOf(str) + 1}季度`
}
},
}
</script>
<style lang="scss" scoped>
$input-height: 28px;
.quarter-select-box {
position: relative;
}
.select-input {
width: 150px;
margin-right: 20px;
height: $input-height;
font-size: 12px;
/deep/.el-input__inner {
height: $input-height;
line-height: $input-height
}
.el-input__icon {
height: $input-height;
line-height: $input-height
}
}
.box-card {
position: absolute;
top: 28px;
width:322px;
padding: 0 3px 20px;
margin-top:10px;
z-index:9999
}
//图标
.el-icon-caret-top {
position: absolute;
color: #fff;
top: 27px;
left: 37px;
font-size: 1rem;
height: 6px;
width: 6px;
}
</style>
element ui 季节选择器
原文：https://www.cnblogs.com/yan122/p/14184700.html
