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;

}

}

}

}

相关推荐
i220818 Faiz Ul1 小时前
计算机毕业设计|基于springboot + vue鲜花商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
暴力袋鼠哥4 小时前
基于 Spring Boot 3 + Vue 3 的农产品在线销售平台设计与实现
vue.js·spring boot·后端
paterWang8 小时前
基于SpringBoot+Vue的鞋类商品购物商城系统的设计与实现
vue.js·spring boot·后端
赵_叶紫10 小时前
Vue 3 从基础到组合式 API 全解析
vue.js
hypnos_xy11 小时前
Vue3 工程构建
vue.js·前端框架
毕设源码-钟学长11 小时前
【开题答辩全过程】以 基于Vue的租房App为例,包含答辩的问题和答案
前端·javascript·vue.js
wuhen_n14 小时前
副作用的概念与effect基础:Vue3响应式系统的核心
前端·javascript·vue.js
张3蜂14 小时前
Vue.js-知识体系
前端·javascript·vue.js
wuhen_n14 小时前
effect函数的完整实现与追踪:深入Vue3响应式核心
前端·javascript·vue.js