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;

}

}

}

}

相关推荐
橙某人7 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
boooooooom8 小时前
讲清 Proxy + effect + track/trigger 流程
javascript·vue.js·面试
leafyyuki8 小时前
在 Vue 项目中玩转 FullCalendar:从零搭建可交互的事件日历
前端·javascript·vue.js
星_离9 小时前
《Vue 自定义指令注册技巧:从手动到自动,效率翻倍》
前端·vue.js
光影少年9 小时前
Vue的响应式原理?Vue2和Vue3有什么区别?
前端·vue.js·掘金·金石计划
wuhen_n11 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js
wuhen_n11 小时前
TypeScript 深度加持:让你的组合式函数拥有“钢筋铁骨”
前端·javascript·vue.js
滕青山11 小时前
基于 ZXing 的 Vue 在线二维码扫描器实现
前端·javascript·vue.js
踩着两条虫12 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(五):创建 H5 移动应用
前端·vue.js·ai编程
踩着两条虫12 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(二):快速入门
前端·vue.js·ai编程