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;

}

}

}

}

相关推荐
用户841794814567 小时前
vxe-table 使用 spanMethod 合并卡顿的解决方案
vue.js
临江仙4557 小时前
Vite 性能优化实战:从 0 到 1 打造极速开发体验(附完整配置)
vue.js·vite
q_19132846957 小时前
基于Springboot2+Vue2的旅游景点购票系统
java·vue.js·spring boot·后端·mysql·毕业设计·计算机毕业设计
季禮祥7 小时前
彻底弄懂KeepAlive
javascript·vue.js·面试
小胖霞7 小时前
彻底搞懂 JWT 登录认证与路由守卫(五)
前端·vue.js·node.js
昔人'8 小时前
CSS content-visibility
前端·css
灵魂学者8 小时前
Vue3.x —— ref 的使用
前端·javascript·vue.js
一 乐8 小时前
鲜花销售|基于springboot+vue的鲜花销售系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
梦6508 小时前
VUE树形菜单组件如何实现展开/收起、全选/取消功能
前端·javascript·vue.js
天天向上10248 小时前
Vue 配置一次打包执行多个命令,并将分别输出到不同的文件夹
前端·javascript·vue.js