el-date-picker在遮罩层下面 解决办法
时间: 2024-05-21 08:08:58 浏览: 11
el-date-picker的遮罩层是由其内部的el-picker-panel组件生成的,如果需要在遮罩层下面显示其他元素,可以通过以下两种方法来实现:
1. 使用CSS样式
可以通过设置el-date-picker组件的z-index属性值为一个较小的数值,同时设置遮罩层上方的元素的z-index属性值为较大的数值,这样就可以让元素显示在遮罩层下面。例如:
```css
.el-date-picker {
z-index: 100;
}
.my-element {
z-index: 200;
}
```
2. 修改el-picker-panel组件源码
可以修改el-picker-panel组件源码,将其生成的遮罩层隐藏掉,这样就可以让其他元素显示在遮罩层下面。具体实现方式可以参考以下代码:
```javascript
<template>
<div class="el-picker-panel">
<div class="my-element"></div> <!-- 在这里添加需要显示在遮罩层下面的元素 -->
<div class="el-picker-panel__body-wrapper">
<!-- 在这里添加原有的el-picker-panel组件代码 -->
</div>
</div>
</template>
<script>
export default {
mounted() {
const bodyWrapper = this.$el.querySelector('.el-picker-panel__body-wrapper');
const backdrop = bodyWrapper.querySelector('.v-date-picker__editor-wrap');
backdrop.style.display = 'none'; // 隐藏遮罩层
}
}
</script>
<style scoped>
.my-element {
position: relative;
z-index: 1;
}
</style>
```