el+vue 实战 ⑧ el-calendar日历组件设置点击事件、el-calendar日历组件设置高度、el-calendar日历组件自定义日历内部内容

一、效果图

日历显示内容变为01，02的形式，点击相应的日期后，有一个弹出框显示当天完成的一些内容。

二、前端代码设置

          

            

              {{ data.day.split("-").slice(2).join() }}
            
          

① 其中value在script中定义如下：

② 日历组件的data的结构如下：

 ③     {{ data.day.split("-").slice(2).join() }}对应输出

// 2022-06-09
console.log(data.day);
// ["2022","06","09"]
console.log(data.day.split("-"));
// ["09"]
console.log(data.day.split("-").slice(2));
// 09
console.log(data.day.split("-").slice(2).join());

④ v-popover:popover绑定一个弹出框

弹出框代码如下，ref绑定的名称同上面命名一样即可。

⑤ 调整日历组件的宽高，样式设置

/deep/.el-calendar-table .el-calendar-day {
  height: 50px !important;
}

三、组件整体代码：

四、总结

后面这个再慢慢优化吧，前端属实写着比后端有趣，但是后端提升空间大，钱更多