element 日历定制化

最新推荐文章于 2024-01-13 17:00:42 发布

zmyalh

最新推荐文章于 2024-01-13 17:00:42 发布

阅读量273

点赞数

文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.csdn.net/zmyalh/article/details/129142441

版权

该文章介绍了如何对ElementUI的日历组件进行定制化，包括使用示例、模板插槽的运用，以及在Vue.js中处理日期选择和样式调整的方法。通过自定义日期单元格的显示和点击事件，实现了特定日期的高亮和回调功能。

摘要由CSDN通过智能技术生成

element 日历定制化

效果图
在这里插入图片描述

组件封装

<!-- 使用 -->
<calendar :datatime="timeData" @click="dataDay"></calendar>
<!-- 调用 -->
dataDay (time) {console.log(time)}//选中的时间

<template>
  <div class="calendarMode">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}" >
        <p :class="showTime(date,data)?'isSelected':''" @click="timeClick(data.day)">
          {{ data.day.split('-').slice(1).join('-') }}  
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  props:{
    // 接参数的格式：datatime:['2023-01-02','2023-01-10','2023-01-12','2023-01-22'],
    datatime:{
      type:Array,
      default: []
    }
  },
  methods:{
    showTime (date,data) {
      if (this.datatime) {
        let state  = this.datatime.find(val=>{
          return val == data.day
        })
        if (state) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    timeClick (data) {
      this.$emit('click',data)
    }
  }
}
</script>

<style lang="stylus" scoped>
.calendarMode
  width 100%
  height 100%
  >>>.el-calendar-table
    text-align: center
  >>>.el-calendar__body
    padding 0px
  >>>.el-calendar-table thead th
    padding 5px 0px
  >>>.el-calendar-day
    height 35px
    line-height 35px 
    padding 0px 
    text-align center
    .isSelected //指定日期的样式
      color #2e78ff
      background #2e78ff33 
  >>>.is-selected //当前选中的数据的样式
    color #2e78ff
    background  #2e78ff33 
    border 1px solid #2e78ff
</style>