<template>
<div>
日期选择日期单个
<mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
v-show="showSeason" @click.stop="showSeason=false"></mark>
<el-input placeholder="请选择季度" v-model="showValue" style="width:138px;" @focus="showSeason=true">
<i slot="prefix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-card class="box-card" style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
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%;float:left;"
:style="season2==0?'color: #409eff;':'color: #606266;'" @click="selectSeason(0)">第一季度</el-button>
<el-button type="text" size="medium" style="float:right;width:40%;"
:style="season2==1?'color: #409eff;':'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%;float:left;"
:style="season2==2?'color: #409eff;':'color: #606266;'" @click="selectSeason(2)">第三季度</el-button>
<el-button type="text" size="medium" style="float:right;width:40%;"
:style="season2==3?'color: #409eff;':'color: #606266;'" @click="selectSeason(3)">第四季度</el-button>
</div>
</el-card>
</div>
</template>
<script>
export default {
props: {
valueArr: {
default: () => {
return ['01-03', '04-06', '07-09', '10-12']
},
type: Array
},
getValue: {
default: () => {},
type: Function
},
},
data() {
return {
showSeason: false,
season: '',
year: new Date().getFullYear(),
showValue: '',
season2: null,
}
},
created() {
},
watch: {
},
methods: {
//上一年
prev() {
this.year = this.year * 1 - 1
},
//下一年
next() {
this.year = this.year * 1 + 1
},
//选择第几季度
selectSeason(i) {
this.season2 = i;
let that = this
that.season = i + 1
let arr = that.valueArr[i].split('-')
that.getValue(that.year + arr[0] + '-' + that.year + arr[1])
that.showSeason = false
this.showValue = `${this.year}年${this.season}季度`
}
}
}
</script>
elementui时间季度选择器
最新推荐文章于 2024-03-26 16:26:22 发布