vue日历排班组件_vue之手把手教你写日历组件

---恢复内容开始---

1.日历组件

1.分析功能：日历基本功能，点击事件改变日期，样式的改变

1.结构分析：html

1.分为上下两个部分

2.上面分为左按钮，中间内容展示，右按钮

下面分为周几展示和日期展示

3.基本结构页面html书写

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{ { item }}

class="every-day"

v-for="item in 42"

:key="item"

>{ { item }}

*{

margin: 0px;

border: 0px;

list-style: none;

}

.calender2{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

height:380px;

width:420px;

border: 1px solid #ccc;

}

.date-header{

margin-left: 10px;

height: 40px;

width: 350px;

line-height: 40px;

text-align: center;

}

.pre-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent rgb(35, 137, 206) transparent transparent;

}

.next-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent transparent transparent  rgb(35, 137, 206);

}

.show-date{

margin-left: 40px;

margin-top: 0px;

display: inline-block;

line-height: 40px;

text-align: center;

width: 310px;

color: rgb(35, 137, 206);

}

.week-header{

background: rgb(35, 137, 206);

color: #fff;

font-size: 14px;

text-align: center;

line-height: 20px;

}

.week-head