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;

}

}

}

}

相关推荐
JIngJaneIL3 分钟前
基于Java非遗传承文化管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
+VX:Fegn08953 分钟前
计算机毕业设计|基于springboot + vue心理健康管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
老华带你飞4 小时前
旅游|基于Java旅游信息系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·旅游
韭菜炒大葱4 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
关关长语5 小时前
Vue本地部署包快速构建为Docker镜像
前端·vue.js·docker
一 乐6 小时前
高校评教|基于SpringBoot+vue高校学生评教系统 (源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习
爱分享的鱼鱼6 小时前
Vue生命周期钩子详解与实战应用
前端·vue.js
晴殇i6 小时前
CSS Grid 与 Flexbox:现代前端布局的双子星
前端·css
曹卫平dudu6 小时前
一起学习TailWind Css
前端·css
sosojie6 小时前
and+design的table前端本地分页处理
前端·vue.js