今天接到一个有点复杂的功能,做12个月份按钮,还要根据月份对应的季节现实不同的按钮底色,包括选中状态,hover状态。
需要一个默认聚焦的按钮,这里用到一个V-focus,就是vue的自定义指令,目前我们在用的是vue2.0。
<button v-focus>需要聚焦状态的按钮<button>
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
在初步需求搞明白之后,出现一个问题,v-focus是对一个dom起效果,如果循环出来的话,12个月份的按钮都会被选中,那就特殊写一个选中的月份,前后在去循环未选中的月份按钮,绑定点击事件,做出来效果如下:
<el-button type="primary" size="small"
v-for="month in monthList"
:key="month"
class="monthClass"
@click="queryMonth(month)"
ref="monthButton1"
v-if="month<selectedMonth"
:class="monthColor(month)">{{month}}</el-button>
<el-button type="primary" size="small"
class="monthClass"
@click="queryMonth(selectedMonth)"
ref="monthButton"
v-focus
:class="monthColorCheck(selectedMonth)">{{selectedMonth}}</el-button>
<el-button type="primary" size="small"
v-for="month in monthList"
:key="month"
class="monthClass"
@click="queryMonth(month)"
ref="monthButton1"
v-if="month>selectedMonth"
:class="monthColor(month)">{{month}}</el-button>
data() {
return:{
selectedMonth: 2,
monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
}},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
methods: {
queryMonth(month){
this.selectedMonth = month;
},
monthColor(month) {
if(month == 12 || month == 1){
return 'winter_color'
}else if(month == 2 || month == 3 || month == 4 || month == 5){
return 'spring_color'
}else if(month == 6 || month == 7 || month == 8 ){
return 'summer_color'
}
else if(month == 9 || month == 10 || month == 11 ){
return 'autumn_color'
}
},
monthColorCheck(month) {//选中状态的按钮样式
if(month == 12 || month == 1){
return 'winter_color_check'
}else if(month == 2 || month == 3 || month == 4 || month == 5){
return 'spring_color_check'
}else if(month == 6 || month == 7 || month == 8 ){
return 'summer_color_check'
}
else if(month == 9 || month == 10 || month == 11 ){
return 'autumn_color_check'
}
},},
这是函数绑定的css样式
.winter_color{
background-color: #D8E4FC !important;
}
.spring_color{
background-color: #D9F5D6 !important;
}
.summer_color{
background-color: #FEEACD !important;
}
.autumn_color{
background-color: #EFE0FB !important;
}
.winter_color_check{
background-color: #3A78F2 !important;
color: #FFFFFF !important;
}
.spring_color_check{
background-color: #7EDD76 !important;
color: #FFFFFF !important;
}
.summer_color_check{
background-color: #F9B856 !important;
color: #FFFFFF !important;
}
.autumn_color_check{
background-color: #AF65EA !important;
color: #FFFFFF !important;
}
交完需求紧接着变了,项目经理想做更明显的季节区分,而且据需求说,每一年的月份对应的季节不固定,季节划分要动态维护......
就是复杂一点,循环加判断再加循环再判断~~~~
<template>
<div v-for="item in seasonList">
<div :class="seasonColor(item.label)">{{ item.label }}</div>
<div :class="seasonBox(item.label)">
<el-button type="primary" size="small"
v-for="month in monthList"
:key="month"
class="monthClass"
@click="queryMonth(month)"
ref="monthButton1"
v-if="month<selectedMonth && item.mlist.includes(month)"
:class="monthColor(month)">{{month}}</el-button>
<el-button type="primary" size="small"
v-if="item.mlist.includes(selectedMonth)"
class="monthClass"
@click="queryMonth(selectedMonth)"
ref="monthButton"
v-focus
:class="monthColorCheck(selectedMonth)">{{selectedMonth}}</el-button>
<el-button type="primary" size="small"
v-for="month in monthList"
:key="month"
class="monthClass"
@click="queryMonth(month)"
ref="monthButton1"
v-if="month>selectedMonth && item.mlist.includes(month)"
:class="monthColor(month)">{{month}}</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
seasonList: {
springList: {
label: '春季',
mlist: [2,3,4,5],
},
summerList: {
label: '夏季',
mlist: [6,7,8],
},
autumnList: {
label: '秋季',
mlist: [9,10,11],
},
winterList: {
label: '冬季',
mlist: [12,1],//季节划分,按需取数,这里写了固定的。
},
},
monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
selectedMonth: 2,
}
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
methods: {
queryMonth(month){
this.selectedMonth = month;
this.loadChart();
},
seasonColor(season) {
if(season == '春季'){
return 'spring_season'
}else if(season == '夏季'){
return 'summer_season'
}else if(season == '秋季' ){
return 'autumn_season'
}
else if(season == '冬季' ){
return 'winter_season'
}
},
seasonBox(season) {
if(season == '春季'){
return 'spring_box'
}else if(season == '夏季'){
return 'summer_box'
}else if(season == '秋季' ){
return 'autumn_box'
}
else if(season == '冬季' ){
return 'winter_box'
}
},
monthColor(month) {
if(month == 12 || month == 1){
return 'winter_color'
}else if(month == 2 || month == 3 || month == 4 || month == 5){
return 'spring_color'
}else if(month == 6 || month == 7 || month == 8 ){
return 'summer_color'
}
else if(month == 9 || month == 10 || month == 11 ){
return 'autumn_color'
}
},
monthColorCheck(month) {
if(month == 12 || month == 1){
return 'winter_color_check'
}else if(month == 2 || month == 3 || month == 4 || month == 5){
return 'spring_color_check'
}else if(month == 6 || month == 7 || month == 8 ){
return 'summer_color_check'
}
else if(month == 9 || month == 10 || month == 11 ){
return 'autumn_color_check'
}
},
},
</script>
css如下
.spring_season{
background-color: #D9F5D650 !important;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 6px;
margin-top: 5px;
}
.summer_season{
background-color: #FEEACD50 !important;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 6px;
margin-top: 5px;
}
.autumn_season{
background-color: #EFE0FB50 !important;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 6px;
margin-top: 5px;
}
.winter_season{
background-color: #D8E4FC50 !important;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 6px;
margin-top: 5px
}
.spring_box{
background-color: #D9F5D650 !important;
padding: 5px;
}
.summer_box{
background-color: #FEEACD50 !important;
padding: 5px;
}
.autumn_box{
background-color: #EFE0FB50 !important;
padding: 5px;
}
.winter_box{
background-color: #D8E4FC50 !important;
padding: 5px;
}
.winter_color{
background-color: #D8E4FC !important;
}
.spring_color{
background-color: #D9F5D6 !important;
}
.summer_color{
background-color: #FEEACD !important;
}
.autumn_color{
background-color: #EFE0FB !important;
}
.winter_color_check{
background-color: #3A78F2 !important;
color: #FFFFFF !important;
}
.spring_color_check{
background-color: #7EDD76 !important;
color: #FFFFFF !important;
}
.summer_color_check{
background-color: #F9B856 !important;
color: #FFFFFF !important;
}
.autumn_color_check{
background-color: #AF65EA !important;
color: #FFFFFF !important;
}
.monthClass{
color:#606266 !important;
border: none !important;
width: 40px;
margin-top: 5px;
margin-left: 10px;
background: #f0f2f8;
border-radius: 2px;
box-shadow: 0px 8px 10px 0px rgba(234,234,234,0.20);
}