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-pickerv-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);});}});
};

element plus+vue3.0 el-date-picker之panel-change无效果，为el-date-picker加标识。相关推荐

vue3.0中使用Element-plus默认英文组件修改为中文
vue3.0中使用Element-plus默认英文组件修改为中文修改方法说明:本方法Element-plus 1.0.2-beta.59 之前的版本可以,1.0.2-beta.59之后版本请看下一篇 ...
vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
使用vue3.0和element实现后台管理模板
通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
❤❤全网最全-----VUE3.0最火爆的编辑器《TinyMCE》❤❤
<tinymce>一个非常适用于vue的编辑器.它在gitHub上的星星就要突破一万大关︿(￣︶￣)︿首先我们的技术选型是 Vite2.0以上+Vue3.0 使用的是JS来引入TinyM ...
vue3.0 execle 导出功能实现
vue3.0 execle 导出功能实现安装引入给table加ref属性获取需要导出的execle表格元素并导出安装 npm install --save xlsx npm install ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
15分钟上手vue3.0(小结)
这篇文章主要介绍了15分钟上手vue3.0,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 Vue 3 还没有正式发布,但是 Alpha 版本已经发布了. 虽然官方还不推荐 ...
【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...

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

这个问题就很奇怪，也很细节，记录一下；

element plus+vue3.0 el-date-picker之panel-change无效果，为el-date-picker加标识。相关推荐

最新文章

热门文章