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;

}

}

}

}

相关推荐
weixin_516875653 分钟前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
H_HX12610 分钟前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
羊小猪~~18 分钟前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
卡布叻_星星1 小时前
同一个页面击穿element样式后,会影响同样组件的使用
前端·vue.js·elementui
加油小吃货1 小时前
定义全局键盘监听事件,el-dialog中删除不可用
javascript·vue.js·elementui
貂蝉空大1 小时前
vue el-table组件实现展开行 默认展开全部
javascript·vue.js·element-plus
猫猫村晨总1 小时前
涉及到行合并的el-table表格导出功能实现
前端·vue.js·element plus
晨旭缘1 小时前
vue3动态监听div高度案例
vue.js·html
VillanelleS1 小时前
Vue2进阶之Vue3高级用法
前端·javascript·vue.js
qq22951165022 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app