当前位置：首页 > news >正文

vue季度选择器(antd2.0 版本无此控件，单独写一个)

news 2025/7/19 6:57:41

vue季度选择器

效果显示

效果显示

在这里插入图片描述

<template><div><a-popoverplacement="bottom"overlayClassName="season-picker"trigger="click"v-model="showSeason"><template #content><div class="season-picker-box"><div class="season-picker-box_header"><a-icontitle="前一年"class="season-picker-box_header-left"type="double-left"@click="prev"></a-icon><spanrole="button"class="season-picker-box_header-label">{{ year }}年</span><a-icontype="double-right"title="后一年"@click="next"class="season-picker-box_header-right"></a-icon></div><div class="season-picker_content"><table class="el-month-table"><tr><td><div><a:class="{ choose: seasonValue[0] === year && seasonValue[1] === 1 }"class="cell"@click="selectSeason(1)">一季度</a></div></td><td><div><a:class="{ choose: seasonValue[0] === year && seasonValue[1] === 2 }"class="cell"@click="selectSeason(2)">二季度</a></div></td></tr><tr><td><div><a:class="{ choose: seasonValue[0] === year && seasonValue[1] === 3 }"class="cell"@click="selectSeason(3)">三季度</a></div></td><td><div><a:class="{ choose: seasonValue[0] === year && seasonValue[1] === 4 }"class="cell"@click="selectSeason(4)">四季度</a></div></td></tr></table></div></div></template><a-inputv-model="strValue"readOnly/></a-popover></div>
</template>


<script>
const CNNUM = ["一", "二", "三", "四"];
const CHOOSEMONTH = [["01", "02", "03"],["04", "05", "06"],["07", "08", "09"],["10", "11", "12"],
];
// 季度选择器 antd当前版本没有 所以写一个
export default {name: "quarterPicker",model: {prop: "value",event: "change",},props: {value: {type: Array,default: () => [],},defaultValue: {type: Array,default: () => [],},},watch: {defaultValue: {handler(newVal) {// ['2024-07', '2024-09']if (newVal && newVal.length) {this.dealDate(newVal);}},deep: true,immediate: true,},value(newVal) {// ['2024-07', '2024-09']if (newVal && newVal.length) {this.dealDate(newVal, true);}},},data() {return {showSeason: false,year: new Date().getFullYear(),strValue: "",seasonValue: ["", ""],};},methods: {dealDate(date, isValue) {this.year = Number(date[0].split("-")[0]);const month = date[0].split("-")[1];CHOOSEMONTH.forEach((item, index) => {if (item.indexOf(month) !== -1) {this.selectSeason(index + 1, isValue);}});},prev() {this.year = this.year * 1 - 1;},next() {this.year = this.year * 1 + 1;},selectSeason(i, isValue = false) {this.strValue = `${this.year}-${CNNUM[i - 1]}季度`;if (!isValue) {// 传入该季度的开始月份和结束月份this.$emit("change", [`${this.year}-${CHOOSEMONTH[i - 1][0]}`,`${this.year}-${CHOOSEMONTH[i - 1][2]}`,]);}this.seasonValue = [this.year, i];this.showSeason = false;},},
};
</script>

<style lang="less" scoped>
.season-picker {margin: 0;padding: 0;color: #000000d9;font-size: 14px;.ant-popover-inner-content {overflow: hidden;vertical-align: top;background: #fff;border-radius: 2px;box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;transition: margin 0.3s;width: 200px;color: #000000d9;padding: 0 8px !important;.ant-popover-arrow {display: none !important;}}&-box {&_header {display: flex;height: 34px;line-height: 28px;color: #000000d9;box-sizing: border-box;border-bottom: 1px solid #f0f0f0;justify-content: space-between;margin-bottom: 15px;&-left,&-right {line-height: 28px;color: #00000040;&:hover {color: #000000d9;}}}.el-month-table {width: 100%;}.el-month-table td div {margin: 10px;font-size: 14px;.cell {font-size: 12px;color: #333333;padding: 8px;&:hover {color: #40a9ff;background: #e6f7ff;cursor: pointer;}}}.choose {color: #fff !important;background: #1890ff !important;}}
}
</style>