1:因为项目需求,需要做一个复选月份,网上和UI组件库都是单选的,所以就得自己捣鼓一个。废话不多说上效果图
2:介绍流程引入组件
3:selectDate组件里面 init函数 初始化数据,获取前十年,然后循环 每一年里面都有12个月的 得到数组 opTime 和 DateList
created(){
this.init();
},
methods:{
// info 选中的数据 type 可传可不传 主要做区分
showModal(info,type){
this.visible = true;
this.ctype = type
this.optTimes = info ? info.split(',') : null
if( info ) this.editTime(info);
},
init(){
const _this = this;
let _opt = {};
let _optTime = {}
let arr = new Array(12);
let optDate = this.getDateList();
optDate.map((item,index)=>{
_opt[index] ={TimeYear:item,queryTime:[]}
_optTime[index] ={TimeYear:item,queryTime:[]}
for(let i = 1; i<= arr.length; i++){
_opt[index].queryTime.push(i)
}
})
_this.optTime = _optTime
_this.DateList = _opt;
}, //获取前十年
getDateList(){
let Dates = new Date();
let year = Dates.getFullYear();
this.OneY = year;
let optDate = [];
for( let i = year -20; i<=year; i++ ){
optDate.push(i)
}
return optDate.reverse()
},
4:完整代码
<template>
<a-modal
:title="title"
style="top: 20px;"
v-model="visible"
@ok="handleSubmit"
:width="'900px'"
:zIndex="12000"
>
<a-row>
<a-col :span="4" style="margin-right:10px" >
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="年份"
>
<a-select style="width:80px" :getPopupContainer="triggerNode=>triggerNode.parentNode"
@change="selectTime"
placeholder="请选择" v-model="OneY" >
<a-select-option v-for="(i,j) in DateList" :key="j" :value="i.TimeYear">{{i.TimeYear}}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="19">
<div class="conterList">
<a-checkbox-group v-model="optTime[curIndex].queryTime" @change="onChange" >
<a-checkbox
v-for="(item,index) in DateList[curIndex].queryTime"
:key="index"
:value="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`"
class="onSelect">
{{item}}月
</a-checkbox>
</a-checkbox-group>
</div>
</a-col>
</a-row>
<a-row style="margin-top:5px;">
<a-col :span="24">
<div><label style="margin: 5px 5px 0 0;display:inline-block;"><span style="color:#f00">*</span>已选择:</label>
<a-tag color="#40a9ff" style="margin-bottom: 3px;" closable @close="()=>closeTime(curIndex,v)" v-for="v in optTimes" :key="v + '-1'">{{ v }}</a-tag>
</div>
</a-col>
</a-row>
</a-modal>
</template>
<script>
export default {
data(){
return{
visible:false,
title:'日期选择',
DateList:[],
labelCol: {
xs: { span: 24 },
sm: { span: 10 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 }
},
optTime:[],
OneY:null,
curIndex:0,
optTimes:null,
ctype:null
}
},
created(){
this.init();
},
methods:{
// info 选中的数据 type 可传可不传 主要做区分
showModal(info,type){
this.visible = true;
this.ctype = type
this.optTimes = info ? info.split(',') : null
if( info ) this.editTime(info);
},
init(){
const _this = this;
let _opt = {};
let _optTime = {}
let arr = new Array(12);
let optDate = this.getDateList();
optDate.map((item,index)=>{
_opt[index] ={TimeYear:item,queryTime:[]}
_optTime[index] ={TimeYear:item,queryTime:[]}
for(let i = 1; i<= arr.length; i++){
_opt[index].queryTime.push(i)
}
})
_this.optTime = _optTime
_this.DateList = _opt;
},
getDateList(){
let Dates = new Date();
let year = Dates.getFullYear();
this.OneY = year;
let optDate = [];
for( let i = year -20; i<=year; i++ ){
optDate.push(i)
}
return optDate.reverse()
},
editTime(info){
const _this = this;
let _optTime = this.optTime;
let _opt = this.optTimes.map(v=>{ return v.substring(0,4)});
for( let item in _optTime ){
_opt.map((items,indexs)=>{
if( items == _optTime[item].TimeYear ){
_optTime[item].queryTime.push(this.optTimes[indexs])
}
})
}
// console.log(_optTime,'_optTime_optTime')
},
handleSubmit(){
const _this = this;
_this.visible = false;
_this.$emit('ok',_this.optTimes,_this.ctype)
_this.optTimes = [];
for( let i in _this.optTime ){
_this.optTime[i].queryTime =[]
}
},
selectTime(info,Node){
const _this = this;
_this.OneY = info
_this.curIndex = parseInt(Node.key)
},
onChange(info){
const _this = this;
let _opt = _this.optTime;
let arr = [];
for(let item in _opt ){
if(_opt[item].queryTime.length > 0) _opt[item].queryTime.filter(v=>{arr.push(v)})
}
_this.optTimes = arr
},
closeTime (index,time) {
this.optTime[index].queryTime = this.optTime[index].queryTime.filter(v=>{
return v !== time
})
// let _opt = this.optTime;
// let s = {};
// for ( let i in _opt ){
// if(_opt[i].queryTime.length > 0) _opt[i].queryTime.filter(v=>{
// return v !== time
// })
// }
this.optTimes = this.optTimes.filter(v => {
return v !== time
})
},
}
}
</script>
<style lang="less" scoped>
.conterList{
display: block;
width: 100%;
border-radius: 6px;
.onSelect{
width: 150px;
margin: 0;
}
}
</style>
5:组件调用方法 根据refs 控制组件
<selectDate ref="OnDate" @ok="getDateValue" />
selectTime(type){
const _this = this;
let data = type == 1 ? _this.timeX :_this.timeY
_this.$refs.OnDate.showModal(data,type)
},
getDateValue(info,cType){
if( cType == 1 ){
this.timeX = info.join(',')
}else{
this.timeY = info.join(',')
}
},