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;

}

}

}

}

相关推荐
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA3 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
jjw_zyfx10 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
我爱吃朱肉11 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
全栈老李技术面试11 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
我爱吃朱肉12 小时前
HTMLcss实现网站抽奖
css·html
乌夷12 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
土豆125013 小时前
构建高级半圆形进度条:SVG 与 纯 CSS 方案深度解析与完整代码
css·react.js·svg