工作日历组件封装

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

思路:

  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>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微微vanilla

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值