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;

}

}

}

}

相关推荐
m0_748254662 小时前
CSS AI 编程
前端·css·人工智能
WX-bisheyuange3 小时前
基于SpringBoot的交通管理在线服务系统
前端·javascript·vue.js·毕业设计
m0_748254664 小时前
CSS id 和 classid 和 class 选择器
前端·css
+VX:Fegn08956 小时前
计算机毕业设计|基于springboot + vue校园实验室管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Dragon Wu6 小时前
TailWindCss cva+cn管理样式
前端·css
烤麻辣烫6 小时前
Web开发概述
前端·javascript·css·vue.js·html
计算机程序设计小李同学7 小时前
基于Web和Android的漫画阅读平台
java·前端·vue.js·spring boot·后端·uniapp
干前端7 小时前
Message组件和Vue3 进阶:手动挂载组件与 Diff 算法深度解析
javascript·vue.js·算法
m0_748254667 小时前
CSS 编辑器
前端·css·编辑器
rqtz7 小时前
网页响应式布局方法
前端·css·响应式