<template>
<el-dialog
title="选择季度"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible="visiable"
class="dialog list"
append-to-body
>
<div>
<div>
<el-input
v-model="showSeason"
placeholder="请选择季度"
style="width:209px;"
@focus="showSeason=true"
>
<i slot="prefix" class="el-input__icon el-icon-date" />
</el-input>
{{ text }}
<el-card
v-show="showSeason"
class="box-card"
style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999;background-color: white !important;"
>
<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"
/>
<span role="button" class="el-date-picker__header-label">{{ year }}年</span>
<button
type="button"
aria-label="后一年"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
@click="next"
/>
</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>
</div>
</div>
</el-dialog>
</template>
<script>
/**
* @file: View 组件 季节选择控件
* @description: UI组件 可选择季节
*/
export default {
data() {
return {
valueArr: ['-01', '-02', '-03', '-04'], // 接口接受的格式(一个季度传一个整体时间) //valueArr: ['01-02-03', '04-05-06', '07-08-09', '10-11-12'],//接口接受的格式(一个季度传一个每个的时间,一个季度三个月)
showSeason: false,
season: '',
year: new Date().getFullYear(),
visiable: false,
text: null
}
},
methods: {
// 打开
open() {
this.visiable = !this.visiable
},
prev() {
this.year = this.year - 1
},
next() {
this.year = this.year + 1
},
selectSeason(i) {
this.season = i + 1
this.showSeason = `${this.year}` + this.valueArr[i]
this.showSeason = false
this.text = `${this.year}年第${this.season}季度`
}
}
}
</script>
Element 选择季度组件, element 原生没有此组件
于 2024-03-15 10:50:26 首次发布