工作日历组件封装

需求：在首页展示日历组件

思路:

1. 封装一个工作日历组件：views/dashboard/components/workcalendar.vue
2. 设置工作组件样式
3. 细节处理/补充样式

步骤：

1. 封装一个工作日历组件：
   1. 在 views/dashboard（仪表盘）创建一个新的文件夹：components
   2. 在 components 创建一个新的文件：workcalendar.vue
   3. 完成workcalendar.vue

      <template>
        <div class="workcalendar">
          <el-calendar v-model="value"> </el-calendar>
        </div>
      </template>
      
      <script>
      export default {
        data () {
          return {
            // 日历组件默认的日期
            value: ''
          }
        }
      }
      </script>

2. 在  views/dashboard/index.vue 页中使用这个组件

   <template>
     <div class="dashboard">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-card>
             <div class="title">
               工作日历
             </div>
             <workcalendar></workcalendar>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card>随便来一个</el-card>
         </el-col>
       </el-row>
     </div>
   </template>
   
   <script>
   export default {
     // 导入组件
     components: {
       workcalendar: () => import('./components/workcalendar.vue')
     }
   }
   </script>
   
   <style lang="scss">
   .dashboard {
     margin: 20px;
   }
   </style>
   
   

3. 设置年月样式及表格样式

   1. 完成年月结构

      <template>
        <div class="workcalendar">
          <!-- 年月结构 -->
          <div class="y-m">
            <!-- 年 -->
            <el-select class="year" v-model="year" placeholder="请选择">
              <el-option label="2022" value="2022"></el-option>
              <el-option label="2023" value="2023"></el-option>
              <el-option label="2024" value="2024"></el-option>
            </el-select>
            <!-- 月 -->
            <el-select v-model="month" placeholder="请选择">
              <el-option label="1" value="1"></el-option>
            </el-select>
          </div>
          <el-calendar v-model="value"></el-calendar>
        </div>
      </template>

   2. 美化样式

      .y-m {
        text-align: right;
        margin: 20px 0;
        .el-select {
          width: 100px;
        }
        .year {
          margin-right: 10px;
        }
        input.el-input__inner {
          height: 30px;
          line-height: 30px;
        }
        i.el-select__caret.el-input__icon.el-icon-arrow-up {
          line-height: 30px;
        }
      }
      // 去掉表头
      .el-calendar__header {
        display: none;
      }
      // 列首行
      .el-calendar__body thead th {
        font-weight: 700;
        // 第6-7列设置颜色
        &:nth-child(6),
        &:nth-child(7) {
          color: #fa7c4d;
        }
      }
      .el-calendar-table__row td {
        // 去掉边框
        border: none !important;
        // 缩小高度
        .el-calendar-day {
          height: 40px;
          line-height: 30px;
          // 设置居中
          text-align: center;
        }
      }

4. 在 views/dashboard/components/workcalendar.vue 中处理年月
   1. 接收外界传来的日期

        // time：从外界传入的时间
        props: {
          time: {
            type: Date,
            default: () => {
              // 定义 props 的默认值时，
              //    如果数据类型是简单数据类型，直接写值
              //    如果数据类型是复杂数据类型，写一个函数返回
              return new Date()
            }
          }
        },

   2. 定义变量

      data () {
          return {
            // 日历组件默认的日期
            value: '',
            // 年
            year: '',
            // 月
            month: '',
            // 年份的数组
            yearsArr: []
          }
        }

   3. 侦听日期

      watch: {
        time: {
          handler: function () {
            // 得到日期
            const mytime = new Date(this.time)
            // 提取出年&月
            const _year = mytime.getFullYear()
            // js 中的月份是 0 ~ 11 ，得到月份后需要 + 1
            const _month = mytime.getMonth() + 1
            // 得以年份的下拉数据
            for (var i = _year - 5; i < _year + 5; i++) {
              this.yearsArr.push(i)
            }
            // 保存年月
            this.year = _year
            this.month = _month
          },
          immediate: true
        }
      },

   4. 生成年月的下拉选项

          <!-- 年月结构 -->
          <div class="y-m">
            <!-- 年 -->
            <el-select class="year" v-model="year" placeholder="请选择">
              <el-option
                v-for="(item, index) in yearsArr"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <!-- 月 -->
            <el-select v-model="month" placeholder="请选择">
              <el-option
                v-for="item in 12"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>