提交 19f64bbe 编写于 作者: KK's avatar KK

日历动画样式

上级 555c30b4
...@@ -33,9 +33,13 @@ ...@@ -33,9 +33,13 @@
:class="['mc-body', {'mc-range-mode': range, 'week-switch': weekSwitch && !isMonthRange, 'month-range-mode': isMonthRange}]" :class="['mc-body', {'mc-range-mode': range, 'week-switch': weekSwitch && !isMonthRange, 'month-range-mode': isMonthRange}]"
v-for="(days, index) in monthRangeDays" v-for="(days, index) in monthRangeDays"
:key='index' :key='index'
:style="mcbodyStyle()"
style="
transition: all 0.5s ease-in-out 0s;
overflow: hidden;"
> >
<div class="month-rang-head" v-if="isMonthRange">{{rangeOfMonths[index][2]}}</div> <div class="month-rang-head" v-if="isMonthRange">{{rangeOfMonths[index][2]}}</div>
<tr v-for="(day,k1) in days" :key="k1" :class="{'gregorianStyle': !lunar}"> <tr v-for="(day,k1) in days" :key="k1" :class="{'gregorianStyle': !lunar}" :style="itemtrStyle(day,days)" style="transition: all .5s; overflow: hidden;">
<td <td
v-for="(child,k2) in day" v-for="(child,k2) in day"
:key="k2" :key="k2"
...@@ -104,6 +108,10 @@ ...@@ -104,6 +108,10 @@
type: Array, type: Array,
default: null default: null
}, },
touchLength:{
type: Number,
default: 0
},
arrowLeft: { arrowLeft: {
type: String, type: String,
default: '' default: ''
...@@ -257,6 +265,15 @@ ...@@ -257,6 +265,15 @@
startWeekIndex: 0, startWeekIndex: 0,
positionWeek: true, positionWeek: true,
isMonthRange: false, isMonthRange: false,
isseletd:false,
changeStyle2(item){
this.changebtntop = item;
this.render(this.year, this.month);
},
createdinit(){
this.changebtntop = false;
this.render(this.year, this.month);
},
}; };
}, },
computed: { computed: {
...@@ -267,6 +284,9 @@ ...@@ -267,6 +284,9 @@
if (this.isRendeRangeMode()) return; if (this.isRendeRangeMode()) return;
this.render(this.year, this.month, '_WATCHRENDER_', 'events'); this.render(this.year, this.month, '_WATCHRENDER_', 'events');
}, },
touchLength(){
// console.log(this.touchLength);
},
disabled() { disabled() {
if (this.isRendeRangeMode()) return; if (this.isRendeRangeMode()) return;
this.render(this.year, this.month, '_WATCHRENDER_', 'disabled'); this.render(this.year, this.month, '_WATCHRENDER_', 'disabled');
...@@ -329,7 +349,6 @@ ...@@ -329,7 +349,6 @@
loopArray.push(this.months[0]); loopArray.push(this.months[0]);
this.monthsLoop = loopArray; this.monthsLoop = loopArray;
this.monthsLoopCopy = this.monthsLoop.concat(); this.monthsLoopCopy = this.monthsLoop.concat();
console.log("sign",this.sign);
}, },
mounted() { mounted() {
const self = this; const self = this;
...@@ -361,10 +380,45 @@ ...@@ -361,10 +380,45 @@
lineHeight: this.lunar ? `${this.itemWidth / 1.5}px` : `${this.itemWidth}px` lineHeight: this.lunar ? `${this.itemWidth / 1.5}px` : `${this.itemWidth}px`
}; };
}, },
// user
itemtrStyle(day,days){
let tempH = parseFloat(this.itemWidth) + 8;
let tmpSelect = false;
days.forEach((item)=>{
if(item.some((i)=>{return i.selected})){
tmpSelect = true;
};
});
let falg = day.some((item)=>{
return tmpSelect?item.selected:item.isToday;
});
if(falg){
return {height: `${tempH}px`,}
}
return this.changebtntop?{
height: `${tempH}px`,
}:{height: 0,}
},
mcbodyStyle(){
let count = 0;
this.monthRangeDays.forEach((item)=>{
item.forEach((i)=>{
count ++;
});
});
if(!this.changebtntop){
count = 1;
}
return {height: `${(this.itemWidth+16)*count+45}px`}
},
tempTouchLength(){
return this.touchLength>0?this.touchLength:"";
},
changeStyle(){ changeStyle(){
this.changebtntop = !this.changebtntop; this.changebtntop = !this.changebtntop;
this.render(this.year, this.month); this.render(this.year, this.month);
}, },
init() { init() {
const now = new Date(); const now = new Date();
this.year = now.getFullYear(); this.year = now.getFullYear();
...@@ -733,14 +787,14 @@ ...@@ -733,14 +787,14 @@
}); });
}); });
} }
if (weekSwitch || this.changebtntop) { if (weekSwitch) {
const tempLength = temp.length; const tempLength = temp.length;
const lastLineMonth = temp[tempLength - 1][0].date.split('-')[1]; // last line month const lastLineMonth = temp[tempLength - 1][0].date.split('-')[1]; // last line month
const secondLastMonth = temp[tempLength - 2][0].date.split('-')[1]; // second-to-last line month const secondLastMonth = temp[tempLength - 2][0].date.split('-')[1]; // second-to-last line month
lastLineMonth !== secondLastMonth && temp.splice(tempLength - 1, 1); lastLineMonth !== secondLastMonth && temp.splice(tempLength - 1, 1);
} }
this.monthDays = temp; this.monthDays = temp;
if (weekSwitch && !this.isMonthRange || this.changebtntop) { if (weekSwitch && !this.isMonthRange) {
if (this.positionWeek) { if (this.positionWeek) {
let payloadDay = ''; let payloadDay = '';
let searchIndex = true; let searchIndex = true;
......
...@@ -14,9 +14,12 @@ ...@@ -14,9 +14,12 @@
.icon-arrow-left:before { content: "\e501"; } .icon-arrow-left:before { content: "\e501"; }
.sign { .sign {
overflow: hidden;
height: 28px; height: 28px;
width: 100%; width: 100%;
position: absolute;
z-index: 12;
bottom: -11px;
left: 0;
} }
.sign-item{ .sign-item{
line-height: 1; line-height: 1;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册