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;

}

}

}

}

相关推荐
像我这样帅的人丶你还11 小时前
别再让JS耽误你进步了。
css·vue.js
@yanyu66611 小时前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
王霸天12 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
悟空瞎说12 小时前
深入 Vue3 响应式:为什么有的要加.value,有的不用?从设计到源码彻底讲透
前端·vue.js
SuperEugene14 小时前
前端通用基础组件设计:按钮/输入框/弹窗,统一设计标准|组件化设计基础篇
前端·javascript·vue.js·架构
我命由我1234514 小时前
在 React 项目中,可以执行 npm start 命令,但是,无法执行 npm build 命令
前端·javascript·vue.js·react.js·前端框架·json·ecmascript
aidou131415 小时前
Vue3自定义实现日期选择器(可单选或多选)
前端·javascript·vue.js·日期选择器·transition
忆琳16 小时前
Vue3 优雅解决单引号注入问题:自定义指令 + 全局插件双方案
vue.js·element
小霍同学16 小时前
CSS Grid 布局指南
css
Ruihong16 小时前
放弃 Vue3 传统 <script>!我的 VuReact 编译器做了一次清醒取舍
前端·vue.js