使用Vue做一个自定义的日历小控件

废话少说，先上效果图：

可以在效果图中看到，选择不同的月份的时候当月天数与星期几都是一一对应，非当月天数则是灰色显示，一目了然。

并且此日历控件支持自动确定当前时间，每次打开默认显示的就是最新的月份，用来做签到打卡的功能比较合适。

由于使用的是原生div进行制作，自定义功能非常强，可以自由的更换样式、背景、颜色、大小等等。

在与数据库的时候可以从数据库获得时间信息并填充到控件中，图中的色块就可以看出。

该控件使用了Vue、CSS、以及最原生的div实现了自定义的样式，不得不说，div在自定义这一块是真的太给力了

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历控件</title>
    <script src="./vue.js"></script>
</head>
<style>
    .writer-upper-right {
    float: left;
    width: 333px;
    height: 300px;
    border: 2px orange solid;
    border-radius: 7px;
}
.calendar-head {
    width: 100%;
    height: 15%;
    border-radius: 7px;
}
.calendar-body {
    width: 99.9%;
    height: 84.9%;
    border-radius: 7px;
    border-top: 1px orange solid;
}
.calendar-head-title {
    float: left;
    width: 100px;
    height: 79%;
    line-height: 33px;
    border-radius: 7px;
    border: 2px orange solid;
    margin-top: 2px;
    margin-left: 1px;
    text-align: center;
    color: orange;
    font-size: 21px;
}
.calendar-head-year {
    float: left;
    margin-left: 9px;
    width: 100px;
    height: 79%;
    border-radius: 7px;
    border: 2px orange solid;
    margin-top: 2px;
    color: orange;
    text-align: center;
}
.select-calendar-year {
    float: left;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    color: orange;
    text-indent: 0.7em;
    font-size: 20px;
}
.select-calendar-year:focus {
    outline: none;
}
.select-calendar-year:hover {
    cursor: pointer;
}
.calendar-b

使用Vue做一个自定义的日历小控件

悦读