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 天前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙1 天前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
用户785127814701 天前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
西洼工作室1 天前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
软件技术NINI1 天前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
鸿Hong1 天前
从事Vue开发之查漏补缺:深度选择器
vue.js
小小前端_我自坚强1 天前
vue提高技术 高级语法相关
前端·vue.js·前端框架
小小前端_我自坚强1 天前
Vue 3 使用心得
前端·javascript·vue.js
Keepreal4961 天前
使用Canvas绘制转盘
javascript·vue.js·canvas
ScriptBIN1 天前
Javaweb--Vue
前端·vue.js