vue 禁用element-ui calendar 取消非本月日期的点击事件

需求描述:原本的日历组件不是本月的日期是灰色的,且点击后会跳转到对应的月份,现在不想它跳转,需要禁用它的点击事件

方法:使用css的pointer-events:none属性即可,把不是当前月份的日历表格的td属性修改

::v-deep .el-calendar {

.el-calendar-table{

width: 100%;

height: 100%;

&:not(.is-range){

//使不是本月的日期不可点击,不会跳转到其他月份

// 当元素的 pointer-events 属性被设置为 none 时,该元素及其子元素将无法与鼠标或触摸设备产生交互作用,即无法触发事件。

td.next{

pointer-events: none;

}

td.prev{

pointer-events: none;

}

}

}

}

相关推荐
jqq6663 分钟前
解析ElementPlus打包源码(五、copyFiles)
前端·javascript·vue.js
计算机毕设VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue在线音乐播放系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
计算机毕设VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue博物馆展览与服务一体化系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Sapphire~1 小时前
Vue3-03 熟悉src文件夹及Vue文件格式
前端·javascript·vue.js
用户841794814562 小时前
vxe-table 复制单元格内容总会在最后加个换行符,如何去掉末尾换行符的解决方法
vue.js
阿民_armin2 小时前
移动端长列表「返回原位置」的完整实践
前端·javascript·vue.js
FanetheDivine2 小时前
defineModel的行为与文档不一致
vue.js
pas1363 小时前
30-mini-vue 更新 element 的 props
前端·javascript·vue.js
GuMoYu3 小时前
el-date-picker限制选择范围
前端·javascript·vue.js
计算机毕设VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue律师咨询系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计