需求:在首页展示日历组件
思路:
- 封装一个工作日历组件:views/dashboard/components/workcalendar.vue
- 设置工作组件样式
- 细节处理/补充样式
步骤:
- 封装一个工作日历组件:
- 在 views/dashboard(仪表盘)创建一个新的文件夹:components
- 在 components 创建一个新的文件:workcalendar.vue
- 完成workcalendar.vue
<template> <div class="workcalendar"> <el-calendar v-model="value"> </el-calendar> </div> </template> <script> export default { data () { return { // 日历组件默认的日期 value: '' } } } </script>
- 在 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>
-
设置年月样式及表格样式
-
完成年月结构
<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>
-
美化样式
.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; } }
-
- 在 views/dashboard/components/workcalendar.vue 中处理年月
- 接收外界传来的日期
// time:从外界传入的时间 props: { time: { type: Date, default: () => { // 定义 props 的默认值时, // 如果数据类型是简单数据类型,直接写值 // 如果数据类型是复杂数据类型,写一个函数返回 return new Date() } } },
- 定义变量
data () { return { // 日历组件默认的日期 value: '', // 年 year: '', // 月 month: '', // 年份的数组 yearsArr: [] } }
- 侦听日期
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 } },
- 生成年月的下拉选项
<!-- 年月结构 --> <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>
- 接收外界传来的日期