扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关vue怎么实现自定义日期组件功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
实现一个日期组件，如图：
components.js代码如下：
Vue.component('sc-calendar',{
template:'' +
'' +
' < ccal.css代码：
html {
font-family: '微软雅黑';
}
body,
div,
span,
img,
ul,
li,
p {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.commonprev {
width: 0.46666667rem;
height: 0.93333333rem;
color: #ffffff;
position: absolute;
display: inline-block;
}
.commonyear {
width: 5.46666667rem;
height: 1.6rem;
font-size: 1rem;
color: #ffffff;
position: absolute;
}
.scCalendar {
width: 25rem;
height: 21.66666667rem;
background: #005498;
background-size: 100%;
}
.scCalendar .calendar_header {
height: 2.93333333rem;
width: 100%;
position: relative;
line-height: 2.93333333rem;
}
.scCalendar .calendar_header .prev {
width: 0.46666667rem;
height: 0.93333333rem;
color: #ffffff;
position: absolute;
display: inline-block;
left: 2.76666667rem;
}
.scCalendar .calendar_header .next {
width: 0.46666667rem;
height: 0.93333333rem;
color: #ffffff;
position: absolute;
display: inline-block;
right: 2.76666667rem;
}
.scCalendar .calendar_header .text_year {
width: 5.46666667rem;
height: 1.6rem;
font-size: 1rem;
color: #ffffff;
position: absolute;
left: 9.76666667rem;
}
.scCalendar .calendar_header .text_month {
width: 5.46666667rem;
height: 1.6rem;
font-size: 1rem;
color: #ffffff;
position: absolute;
left: 13.1rem;
}
.scCalendar .calendar_content {
padding: 0 1rem;
}
.scCalendar .calendar_content li {
width: 2rem;
height: 2rem;
line-height: 2rem;
margin-right: 1.5rem;
text-align: center;
margin-bottom: 0.66666667rem;
float: left;
color: white;
font-size: 0.93333333rem;
}
.scCalendar .calendar_content .week li:nth-of-type(7) {
margin-right: 0;
}
.scCalendar .calendar_content .day .marginRight0 {
margin-right: 0;
}index.html代码：