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;

}

}

}

}

相关推荐
桂月二二1 小时前
Vue3状态管理深度解析:Pinia架构设计与性能优化实践
vue.js
_未知_开摆3 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
DarkBule_3 小时前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
喝拿铁写前端3 小时前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
晓风伴月3 小时前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
爱泡脚的鸡腿3 小时前
HTML CSS 第二次笔记
前端·css
lvbb664 小时前
框架修改思路
前端·javascript·vue.js
qq_456001654 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
工业互联网专业4 小时前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
FanetheDivine4 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js