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;

}

}

}

}

相关推荐
胖者是谁6 小时前
EasyPlayerPro的使用方法
前端·javascript·css
i小溪9 小时前
Easy (Horizontal Scrollbar) Fixes for Your Blog CSS 博客 CSS 的简易(水平滚动条)修复
css
持续前行9 小时前
vscode 中找settings.json 配置
前端·javascript·vue.js
JosieBook9 小时前
【Vue】11 Vue技术——Vue 中的事件处理详解
前端·javascript·vue.js
安逸点9 小时前
Vue项目中使用xlsx库解析Excel文件
vue.js
一只小阿乐9 小时前
vue 改变查询参数的值
前端·javascript·vue.js·路由·router·网文·未花中文网
小酒星小杜10 小时前
在AI时代下,技术人应该学会构建自己的反Demo地狱系统
前端·vue.js·ai编程
Code知行合壹10 小时前
Pinia入门
vue.js
今天也要晒太阳47310 小时前
element表单和vxe表单联动校验的实现
vue.js
donecoding11 小时前
Sass 模块化革命:告别 @import,拥抱 @use 和 @forward
前端·css·代码规范