1.创建组件components >calander >index.vue
<template><div class="page" v-if="show"> <div class="box"> <div class="box_head" v-if="!propshow"><div class="font28" @click="calanderShowData">取消</div><div class="font28" @click="calanderSubmit">确定</div> </div><div class="box-flex"> <div class="flex-item item-content-current-day item-content-tit"> <div class="item-content titleHead">{{currentDate}}</div> </div> </div> </div> <div class="box-flex"> <div class="flex-item"> <div class="item-content">一</div> </div> <div class="flex-item"> <div class="item-content">二</div> </div> <div class="flex-item"> <div class="item-content">三</div> </div> <div class="flex-item"> <div class="item-content">四</div> </div> <div class="flex-item"> <div class="item-content">五</div> </div> <div class="flex-item"> <div class="item-content">六</div> </div> <div class="flex-item"> <div class="item-content">日</div> </div> </div> <div class="box-flex"> <div class="flex-item flexData" v-for='(item, index) in currentDayList' :key='item' @click='itemFun(item.num,mouth[index],index, "first", item.state)' :class="{'hover-date': Section[index] && item.num, 'noBack': !item.state && item.num && !propshow}"> <div class="item-content red-background" v-if='currentDay === item.num && mouth[index].mouth === currentMouth.mouth && currentMouth.year === mouth[index].year' :class="{'hoverColorData' : Section[index] && item.num, 'hover-date':active[index]}"><p>今天</p><p v-if="item.number && propshow">{{item.number}}展位</p> </div> <div class="item-content backgroundData" v-else :class="{'hover-date':active[index]}" ><p>{{item.num}}</p><p v-if="item.number && propshow">{{item.number}}展位</p></div> </div> </div> <div class="box"> <div class="box-flex"> <div class="flex-item item-content-current-day item-content-tit"> <div class="item-content titleHead">{{currentDateTwo}}</div> </div> </div> </div> <div class="box-flex"> <div class="flex-item"> <div class="item-content">一</div> </div> <div class="flex-item"> <div class="item-content">二</div> </div> <div class="flex-item"> <div class="item-content">三</div> </div> <div class="flex-item"> <div class="item-content">四</div> </div> <div class="flex-item"> <div class="item-content">五</div> </div> <div class="flex-item"> <div class="item-content">六</div> </div> <div class="flex-item"> <div class="item-content">日</div> </div> </div> <div class="box-flex"> <div class="flex-item flexData" v-for='(item, index) in currentDayListData' :key='item' @click='itemFun(item.num,mouths[index],index, "last", item.state)' :class="{'hover-date': Sections[index] && item.num, 'noBack': !item.state && item.num && !propshow}"> <div class="item-content backgroundData" :class="{'hover-date':actives[index]}"><p>{{item.num}}</p><p v-if="item.number && propshow">{{item.number}}展位</p></div> </div> </div> <div v-if="propshow" class="propshowData"></div></div> </template> <script>import vue from 'vue'export default {name: 'calander',data () {return {calanderList: [],show: false,currentDate: '05月03日',currentDateTwo: '06月03日',dayList: '',currentDayList: [],currentObj: '',currentDay: '',mouth: [],currentMouth: null,hoverDate: {'date': null, 'mouth': null, 'year': null},activeClick: 0,active: [],actives: [],Section: [],firstIndex: 0,lastIndex: 0,currentDayListData: [],currentJudge: false,currentObjNew: '',Sections: [],lastType: '',fristType: '',numArray: [],numArrayTwo: []}},props: {propshow: false,boothArray: [], // 从父级传来的数组，中主要携带number展位数，calanderList: [],yearAndmouthFirst: {},yearAndmouthTwo: {},calanderShow: false},mounted () {let timeData = this.getNextMonth(new Date(),1)var currentObj = this.getCurrentDayString()this.currentDate = currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日'this.currentDateTwo = timeData.getFullYear() + '年' + (timeData.getMonth() + 1) + '月' + timeData.getDate() + '日'// this.currentObjNew = currentObj.getFullYear() + '/' + (currentObj.getMonth() + 2) + '/' + currentObj.getDate()this.currentDay = currentObj.getDate()this.currentObj = currentObjthis.currentMouth = {mouth: currentObj.getMonth() + 1,year: currentObj.getFullYear()}setTimeout(() => {this.setSchedule(currentObj, 'newMonth') this.setSchedule(this.getNextMonth(new Date(),1), 'nextMonth') // this.setSchedule(new Date(this.currentObjNew), 'nextMonth')},100);},methods: { monthDay: function (year, month) {month = parseInt(month, 10);var d = new Date(year, month, 0); //这个是都可以兼容的var date = new Date(year + "/" + month + "/0") //IE浏览器可以获取天数，谷歌浏览器会返回NaNreturn d.getDate();},getNextMonth: function (date,length) {let yy = date.getFullYear()let mm = date.getMonth()let dd = date.getDate()let nm= 0//目标月份nm = mm+lengthlet nd = 0//目标天数if(this.monthDay(yy,nm+1)<dd){nd = this.monthDay(yy,nm+1)}else{nd = dd-1}date.setDate(1)date.setMonth(nm)date.setDate(nd)return date},calanderSubmit(){console.log(this.numArray)this.$emit('assignment', this.numArray)},calanderShowData(){this.$emit('calanderShowClick', this.calanderShow)},formatTwo (n) {if (n >= 10) return nelse return '0' + n},// 判断日历的当前日期是否不可点击 isDisabled (calander, index, item) {// if (new Date(calander).getTime() < new Date().getTime()) {// this.mouth[index].state = 'disabled'// return false// } },getWeekDayNextMonth(){var myDate = new Date()myDate.setMonth(myDate.getMonth() + 1);myDate.setDate(1);var weekDay=new Array(7, 1, 2, 3, 4, 5, 6)return weekDay[myDate.getDay()];},itemFun (item, yearAndmouth, index, type, stateClick) { if (stateClick) {let dataD = new Date();let curMonthDays = new Date(dataD.getFullYear(), (dataD.getMonth()+1), 0).getDate()this.hoverDate = {'date': item, 'mouth': yearAndmouth.mouth, 'year': yearAndmouth.year}if (type == 'first') {var activeArrayData = this.activevar SectionArrayData = this.Section} else {var activeArrayData = this.activesvar SectionArrayData = this.Sections }if (this.activeClick == 0) {this.yearAndmouthFirst = yearAndmouththis.yearAndmouthFirst.date = itemfor(let i=0; i<this.active.length; i++){this.active[i] = falsevue.set(this.active, i, this.active[i])}for(let i=0; i<this.actives.length; i++){this.actives[i] = falsevue.set(this.actives, i, this.actives[i])}for(let t=0; t<this.Section.length; t++){this.Section[t] = falsevue.set(this.Section, t, this.Section[t])}for(let t=0; t<this.Sections.length; t++){this.Sections[t] = falsevue.set(this.Sections, t, this.Sections[t])}this.numArray = []this.activeClick = 1this.fristType = typethis.firstIndex = itemthis.yearFirst = yearAndmouth.yearthis.mouthFirst = yearAndmouth.mouthactiveArrayData[index] = truevue.set(activeArrayData, index, activeArrayData[index])this.numArray.push(this.yearAndmouthFirst)console.log(this.numArray)} else if (this.activeClick == 1){ this.numArray = []this.yearAndmouthTwo = yearAndmouththis.yearAndmouthTwo.date = itemif (this.firstIndex != index) {this.activeClick = 0this.lastIndex = itemthis.lastType = typethis.yeaTwo = yearAndmouth.yearthis.mouthTwo = yearAndmouth.mouthactiveArrayData[index] = truevue.set(activeArrayData, index, activeArrayData[index])if (this.fristType == this.lastType) {if (this.lastIndex > this.firstIndex) {var indexCenter = this.lastIndex - this.firstIndex + 1} else {var indexCenter = this.firstIndex - this.lastIndex + 1 }for(let j=0; j<indexCenter; j++){if (this.lastIndex < this.firstIndex) {var indexData = j + indexthis.numArray.push({'date': item + j, 'mouth': yearAndmouth.mouth, 'year': yearAndmouth.year})} else {this.numArray.unshift({'date': item - j, 'mouth': yearAndmouth.mouth, 'year': yearAndmouth.year})var indexData = index - j}SectionArrayData[indexData] = truevue.set(SectionArrayData, indexData, SectionArrayData[indexData])}} else {if (this.fristType == 'first') {var indexCenter = curMonthDays - this.firstIndex + 1var indexCenters = this.lastIndex} else {var indexCenter = curMonthDays - this.lastIndex + 1var indexCenters = this.firstIndex }for(let j=0; j<indexCenter; j++){if (this.fristType == 'first') {var indexData = this.firstIndex + jthis.numArray.push({'date': indexData, 'mouth': this.mouthFirst, 'year': this.yearFirst})} else {var indexData = this.lastIndex + jthis.numArray.push({'date': item + j, 'mouth': this.mouthTwo, 'year': this.yeaTwo})}this.Section[indexData + 1] = truevue.set(this.Section, indexData, this.Section[indexData]) } var monthData = this.getWeekDayNextMonth()for(let j=0; j<indexCenters; j++){if (this.fristType == 'first') {var indexDatas = j + monthData - 1this.numArrayTwo.unshift({'date': item - j, 'mouth': this.mouthTwo, 'year': this.yeaTwo})} else {var indexDatas = this.firstIndex - j + monthData -2this.numArrayTwo.unshift({'date': this.firstIndex - j , 'mouth': this.mouthFirst, 'year': this.yearFirst})}this.Sections[indexDatas] = truevue.set(this.Sections, indexDatas, this.Sections[indexDatas])}}this.numArray = this.numArray.concat(this.numArrayTwo)} }}},doDay: function (e) {var that = thisvar currentObj = that.currentObjvar Y = currentObj.getFullYear()var m = currentObj.getMonth() + 1let newData = new Date let newMonth=newData.getMonth()+1;let d = currentObj.getDate()var str = ''if (e.currentTarget.dataset.key === 'left') {m -= 1if (m <= 0) {str = (Y - 1) + '/' + 12 + '/' + d} else {str = Y + '/' + m + '/' + d}this.currentJudge = true} else if(e.currentTarget.dataset.key === 'right') {if (newMonth !== m) {m += 1if (m <= 12) {str = Y + '/' + m + '/' + d} else {str = (Y + 1) + '/' + 1 + '/' + d}this.currentJudge = true} else {this.currentJudge = false}} else if (e.currentTarget.dataset.key === 'leftTwo'){ if (newMonth !== m) {m -= 1if (m <= 0) {str = (Y - 1) + '/' + 12 + '/' + d} else {str = Y + '/' + m + '/' + d}this.currentJudge = true} else {this.currentJudge = false}} else if (e.currentTarget.dataset.key === 'rightTwo'){m += 1if (m <= 12) {str = Y + '/' + m + '/' + d} else {str = (Y + 1) + '/' + 1 + '/' + d}this.currentJudge = true}if (this.currentJudge) {currentObj = new Date(str)this.currentDate = currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日'this.currentDateTwo = currentObj.getFullYear() + '年' + (currentObj.getMonth() + 2) + '月' + currentObj.getDate() + '日' this.currentObjNew = currentObj.getFullYear() + '/' + (currentObj.getMonth() + 2) + '/' + currentObj.getDate() + '/' this.currentObj = currentObjif (e.currentTarget.dataset.key == 'left' || e.currentTarget.dataset.key == 'right') {this.setSchedule(currentObj, 'newMonth')} else {this.setSchedule(new Date(this.currentObjNew), 'nextMonth')}}},getCurrentDayString: function () {var objDate = this.currentObjif (objDate !== '') {return objDate} else {var cobj = new Date()var a = cobj.getFullYear() + '/' + (cobj.getMonth() + 1) + '/' + cobj.getDate()return new Date(a)}},setSchedule: function (currentObj, type) {var that = thisvar m = currentObj.getMonth() + 1var Y = currentObj.getFullYear()var d = currentObj.getDate()var newDate = new Date()var newYear = newDate.getFullYear()var newMonth = newDate.getMonth() + 1// var dayString = Y + '/' + m + '/' + currentObj.getDate()var currentDayNum = new Date(Y, m, 0).getDate()var currentDayWeek = currentObj.getUTCDay() + 1var result = currentDayWeek - (d % 7 - 1)var firstKey = result <= 0 ? 7 + result : resultvar currentDayListNew = []var mouth = []var f = 0for (var i = 0; i < 42; i++) {mouth[i] = {'mouth': m,'year': Y}currentDayListNew[i] = {'num': '','number': '','state': false}if (i < firstKey - 1) {currentDayListNew[i].num = ''} else {if (f < currentDayNum) {currentDayListNew[i].num = f + 1f = currentDayListNew[i].numif (newYear == Y && newMonth == m) {if (f >= d) {currentDayListNew[i].state = true}} else {if (f <= d) {currentDayListNew[i].state = true}}} else if (f >= currentDayNum) {currentDayListNew[i].num = ''}if (this.boothArray.length > 0) {this.boothArray.forEach((element, indexArray) => {if (element.year == Y && element.mouth == m) {if (element.date == currentDayListNew[i].num) {currentDayListNew[i].number = String(element.number)}}})}if (this.calanderList.length > 0) {this.calanderList.forEach((element, indexList) => {if (element.year == Y && element.mouth == m) {if (element.date == currentDayListNew[i].num) {if (type == 'newMonth') {this.Section[i] = true} else {this.Sections[i] = true} }}});}}}if (type == 'newMonth') {that.currentDayList = currentDayListNewthat.mouth = mouth} else {that.currentDayListData = currentDayListNewthat.mouths = mouth }this.show = true}}}</script><style scoped>.box_head{height: 1.173333rem /* 88/75 */;background: #fff;display: flex;justify-content: space-between;align-items: center;padding: 0 .4rem /* 30/75 */;border-bottom: .013333rem /* 1/75 */ solid #E5E5E5;}.noBack{background: #bbb!important;/* border-radius: 5px!important; */}.hoverColorData{color: #fff!important;}.propshowData{position: absolute;left: 0;right: 0;bottom: 0;top: 0;background: rgba(0, 0, 0, 0.1);z-index: 9999;}.page{background: #fff;position: relative;}.titleHead{margin: .266667rem /* 20/75 */ 0!important;}.sectionBack{background: #8A2BE2;}page {background-color: #2a8cef; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2)); display: flex; flex-direction: column; width: 100%; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; font-size: 16px; color: #222;} .disabled{color: #ccc !important;} .hover-date{background: #367EED;color: #fff !important;border-radius: 5px;} .box {display: block; /* margin: 10px; */border-top: .013333rem /* 1/75 */ solid #efefef; } .glyphicon-triangle-left img{transform:rotate(180deg)} .glyphicon img{width:12px;height: 19px;margin-top:15px;}.box-flex {display: -webkit-box; display: -webkit-flex; display: flex; flex-wrap: wrap; padding: 0 .133333rem /* 10/75 */;} .flex-item {flex-flow: nowrap; flex-grow: 1; flex-shrink: 1; width: 14%; margin: 1px 1px 1px 0px;} .item-content {margin: 1px; padding: 5px 1px; text-align: center; /* height: 45px; *//* line-height: 45px; */font-size:14px;position: relative;flex-wrap: wrap;justify-content: center;} .item-content i{width:100%;text-align: center;left:0;position: absolute;top:8px;}.item-content span{width:100%;text-align: center;left:0;position: absolute;top:3px;font-size:12px;color: #367EED;line-height: 1;}.item-content-tit{width:30%;/* margin: .133333rem 10/75 0; */}.item-content-tit .item-content{font-size:17px;}.red-background{color:#367EED;border-radius: 5px;}.item-content-current-day {flex-grow: 2; } </style>
2.页面中引用组件
<calander @assignment="assignment" :propshow="propshow" :boothArray="boothArray" :calanderList="calanderList"></calander> <script>import calander from '@/components/calander'export default {components: {calander},data() {return {calanderList: [],boothArray: [],propshow: false,};},methods: {assignment(){// 组件调取父级方法},}}</script>
