vue初学实践之路——vue简单日历组件(3)
这一篇我们来实现管理员修改每一天剩余数量的功能。
<div id="calendar"> <div id="left"> <span> 要修改的日期 </span> <li v-for="d in checkedDays">{{ d }} </li> <div v-if="checkedDays.length!=0"> <label for="checkedCount">要修改的天数</label> <input id="checkedCount" v-model="checkedCount" > <button >确定修改</button> </div> </div> <div id="right"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li> <li class="year-month" @click="pickYear(currentYear,currentMonth)"> <span class="choose-year">{{ currentYear }}</span> <span class="choose-month">{{ currentMonth }}月</span> </li> <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li> </ul> </div> <!-- 星期 --> <ul class="weekdays"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li style="color:red">六</li> <li style="color:red">日</li> </ul> <!-- 日期 --> <ul class="days"> <li v-for="dayobject in days" style="height: 80px;" > <!--本月--> <!--如果不是本月 改变类名加灰色--> <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span> <!--如果是本月 还需要判断是不是这一天--> <span v-else> <!--今天--> <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">{{ dayobject.day.getDate() }}</span> <span v-else>{{ dayobject.day.getDate() }} </span> </span> <p v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate()>=new Date().getDate()"> <input type="checkbox" :id="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()" :value="(dayobject.day.getMonth()+1)+'-'+dayobject.day.getDate()" v-model="checkedDays" > </p> <div v-if="leftobj[dayobject.index]"> <!-- <button @click="leftobj[dayobject.value]=true" v-if="leftobj[dayobject.index].value===false"> 修改</button> <button @click="leftobj[dayobject.value]=false" v-else-if="leftobj[dayobject.index].value===true"> 确定</button> --> </div> </li> </ul> </div> <!--right--> </div>
<script>
var myVue=new Vue({
el: '#calendar',
data: {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
leftobj:[ //存放剩余数量
{count:1,value:false},
{count:2,value:false},
{count:3,value:false},
{count:4,value:false},
{count:5,value:false},
],
checkedDays:[],
checkedCount:20,
},
created: function() {
this.initData(null);
},
methods: {
getleft:function () {
return this.left++
},
cutleft:function (day) {
// this.leftArray[day.index]-=1;
if(this.leftobj[day.index].count>=1)
this.leftobj[day.index].count--;
else
alert('已经没有位置了')
},
initleftcount:function()
{
//每次初始化需要更新数量
for(var i=0;i<4;i++)
{
this.leftobj[i].count=i+3;
}
},
initData: function(cur) {
var leftcount=0;
var date;
var index=0;
//this.initleftcount();
//有两种方案 一种是每次翻页 ajax获取数据初始化 http请求过多会导致资源浪费
// 一种是每次请求 ajax获取数据初始化 数据更新过慢会导致缺少实时性
//还可以setTimeout 定时请求更新数据 实现数据刷新（可能会更好）
if (cur) {
date = new Date(cur);
} else {
var now=new Date();
var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
}
this.currentDay = date.getDate();
console.log(this.currentDay);
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // 1...6,0
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
console.log("today:" + str + "," + this.currentWeek);
this.days.length = 0;
// 今天是周日，放在第一行第7个位置，前面6个
//初始化本周
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
console.log("y:" + d.getDate());
var dayobject={};
dayobject.day=d;
var now=new Date();
if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
{
dayobject.index=index++;
}
else if(index!=0&&index<3)
dayobject.index=index++;
this.days.push(dayobject);
}
//其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject={};
dayobject.day=d;
var now=new Date();
if(d.getDate()===(now.getDate())&&d.getMonth()===now.getMonth()&&d.getFullYear()===now.getFullYear())
{
dayobject.index=index++;
}
else if(index!=0&&index<3)
dayobject.index=index++;
this.days.push(dayobject);
}
},
pickPre: function(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year , month , 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
},
pickNext: function(year, month) {
var d = new Date(this.formatDate(year , month , 1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
},
pickYear: function(year, month) {
alert(year + "," + month);
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function(year,month,day){
var y = year;
var m = month;
if(m<10) m = "0" + m;
var d = day;
if(d<10) d = "0" + d;
return y+"-"+m+"-"+d
},
},
});
</script>
我们在data中加入了checkedDays数组，用来存放我们所选定的日期，因为我们不需要修改checkDays数组中的值，所以不使用对象数组的方式。
checkedCount为默认修改20天的剩余数量。
页面效果为：
这样我们就实现了管理员修改日期的功能，剩下所做的就是与服务器交互的过程了。
到这里日历预定组件的功能就算完成了。
将这个小组件做完，我们的vue基础知识已经不错了。
github此项目地址：https://github.com/herozhou/vue-order-calendar
