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;

}

}

}

}

相关推荐
teeeeeeemo10 分钟前
Vue数据响应式原理解析
前端·javascript·vue.js·笔记·前端框架·vue
Sahas101914 分钟前
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
前端·javascript·vue.js
Jinxiansen021124 分钟前
Vue 3 实战:【加强版】公司通知推送(WebSocket + token 校验 + 心跳机制)
前端·javascript·vue.js·websocket·typescript
我在北京coding1 小时前
Uncaught ReferenceError: process is not defined
前端·javascript·vue.js
子言sugar1 小时前
CSS高效开发必备小技巧集锦
css
baozj1 小时前
一次表单数据复用引发的 Bug:理解 Vue 中的 data 为何是函数
前端·javascript·vue.js
Nano2 小时前
ES6中的Proxy和Reflect:深入解析与Vue3响应式原理的完美结合
前端·vue.js
前端工作日常2 小时前
Vue源码中为何使用new Function而不使用eval?
vue.js
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
javascript·css·html
工业互联网专业2 小时前
基于django+vue的健身房管理系统-vue
vue.js·python·django·毕业设计·源码·课程设计·健身房管理系统