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;

}

}

}

}

相关推荐
爱吃泡芙的小白白41 分钟前
Vue 3 核心原理与实战:从响应式到企业级应用
前端·javascript·vue.js
JosieBook3 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
刘一说5 小时前
Vue3 模块语法革命:移除过滤器(Filters)的深度解析与迁移指南
前端·vue.js·js
Trae1ounG5 小时前
这是什么dom
前端·javascript·vue.js
513495926 小时前
在Vue.js项目中使用docx和file-saver实现Word文档导出
前端·vue.js·word
Beginner x_u6 小时前
CSS 中的高度、滚动与溢出:从 height 到 overflow 的完整理解
前端·css·overflow·min-height
Yan.love7 小时前
【CSS-布局】终极方案:Flexbox 与 Grid 的“降维打击”
前端·css
请叫我聪明鸭8 小时前
基于 marked.js 的扩展机制,创建一个自定义的块级容器扩展,让内容渲染为<div>标签而非默认的<p>标签
开发语言·前端·javascript·vue.js·ecmascript·marked·marked.js插件
RunsenLIu8 小时前
基于Spring Boot + Vue的图书馆座位预约管理系统
vue.js·spring boot·后端
Trae1ounG9 小时前
Vue生命周期
前端·javascript·vue.js