下图为效果图,众所周知element-ui没有季度组件,但项目上也经常会用到,需要我们自行开发。
1.在components 里新建组件文件(名称自定义)
2.直接贴完整代码。(可拷贝直接用)
class="_mark" v-show="showSeason" @click.stop="showSeason = false" >
placeholder="请选择季度" v-model="showValue" size="small" style="width:12.7rem;" @focus="showSeason = true" >
>{{ year }}年
>
type="text" size="medium" class="_left" @click="selectSeason(0)" >第一季度
>
type="text" size="medium" class="_right" @click="selectSeason(1)" >第二季度
>
type="text" size="medium" class="_left" @click="selectSeason(2)" >第三季度
>
type="text" size="medium" class="_right" @click="selectSeason(3)" >第四季度
>
export default {
props: {
valueArr: {
default: () => {
return ["01-03", "04-06", "07-09", "10-12"];
},
type: Array,
},
getValue: {
default: () => {},
type: Function,
},
defaultValue: {
default: "",
type: String,
},
},
data() {
return {
showSeason: false,
season: "",
year: new Date().getFullYear(),
showValue: "",
};
},
created() {
if (this.defaultValue) {
let value = this.defaultValue;
let arr = value.split("-");
this.year = arr[0].slice(0, 4);
let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
let arrAll = this.valueArr;
this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
}
},
watch: {
defaultValue: function(value) {
let arr = value.split("-");
this.year = arr[0].slice(0, 4);
let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
let arrAll = this.valueArr;
// if(arrAll.indexOf(str)==0){
// this.showValue = `${this.year}年第一季度`;
// }
this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
},
},
methods: {
one() {
this.showSeason = false;
},
prev() {
this.year = this.year * 1 - 1;
},
next() {
this.year = this.year * 1 + 1;
},
reast(){
this.showValue = ''
},
selectSeason(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;
if(this.season == 1){
this.showValue = `${this.year}年第一季度`;
}else if(this.season == 2){
this.showValue = `${this.year}年第二季度`;
}
else if(this.season == 3){
this.showValue = `${this.year}年第三季度`;
}
else if(this.season == 4){
this.showValue = `${this.year}年第四季度`;
}
// this.showValue = `${this.year}年${this.season}季度`;
that.sendMsg()
},
getLastDay(year, month) {
var new_year = year; //取当前的年份
var new_month = month++; //取下一个月的第一天,方便计算(最后一天不固定)
if (month > 12) {
new_month -= 12; //月份减
new_year++; //年份增
}
var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
},
sendMsg() {
this.$emit("func", this.showValue);
},
},
};
._mark {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0);
z-index: 999;
}
.yearBtn {
text-align: center;
padding: 0;
}
.box-card {
width: 322px;
padding: 0 3px 20px;
margin-top: 10px;
position: fixed;
z-index: 9999;
}
.text.item {
text-align: center;
}
.text.item >>> .el-button {
width: 40%;
color: #606266;
}
.text.item ._left {
float: left;
}
.text.item ._right {
float: right;
}
3.在需要的页面引入即可使用。