element plus+vue3.0 el-date-picker之panel-change无效果,为el-date-picker加标识。

这个问题就很奇怪,也很细节,记录一下;

有这样一个需求场景。就是el-date-picker的日期选择器组件 根据返回的某天的数据给某天加上标识,panel-change事件却无效果(panel-change事件–当日期面板改变时触发)
效果图:在这里插入图片描述

在这里碰到一个坑,panel-change无效果??触发没反应。网上关于panel-change事件资料少,于是怀疑element plus版本问题,果然,看图:

在这里插入图片描述蓝色标志部分 就是说添加面板更改事件,意思是只1.3.0-bate.6版本以上才新增了这个panel-change事件,发现自己的element plus 是1.2.0-bate.2,升级就可以了。毕竟都去看人家的更新日志了。哎…
所以说啊,有时候就是这些隐藏性的问题,需要看版本。。这个卡了一下午,记录一下,人有点麻了

说明:panel-change事件就是日期面板上切换年和月导航会触发
最后附上示例实现代码:
里面有一些注释项,记得多留意看下。我这里提供一些示例。更全面的属性还是去官网看下;记录一下,记录一下,记录一下。。。

//html部分
 		<el-date-picker
            v-model="day"
            type="date"
            placeholder="Pick a day"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            @panel-change="changeTime"
            teleported
            >
            <template #default="cell">
              <div class="cell" :class="{ current: cell.isCurrent }">
                <span class="text">{{ cell.text }}</span>
                <span v-if="isHoliday(cell)" class="holiday" />
              </div>
            </template>
          </el-date-picker>
// css部分
//日历样式 主要设置红色标致的定位
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #626aef;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
// js部分
<script lang="ts"  setup>
import { ref, reactive, defineEmits } from "vue";
// 日期
const day = ref("");
//holidays 数组里面的格式要和下面的dayjs.format格式一致
//例如:["2022-11-2","2022-11-3","2022-11-4"]
const holidays = ref([]);
const isHoliday = ({ dayjs }) => {
  return holidays.value.includes(dayjs.format("YYYY-M-D"));
};
// 切换日期组件导航按钮
//data为当前日期面板的时间,后面转成了时间戳
const changeTime = (date, mode, view) => {
  const d = new Date(date);
  const  params = {
    year: d.getFullYear(),
    month: d.getMonth() + 1,
  };
  calendar(params).then((res) => {
    if (res.data.length > 0) {
      holidays.value = [];
      res.data.forEach((item) => {
        holidays.value.push(
          d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + item.day
        );
      });
    }
  });
};
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

一行代码上晴天

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

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

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

打赏作者

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

抵扣说明:

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

余额充值