vue项目elements Plus 中el-dialog弹窗中日期选择器遮罩层问题

如上图所示,日期选择器弹出框在底部,这是只需要

设置el-dialog的z-index属性即可。

 <el-dialog
      v-model="addDialogVisible"
      :title="isStatus == 'add' ? '添加数据' : '编辑数据'"
       width="60%"
      :append-to-body="true"
       :z-index="100"
      draggable
    >
</el-dialog>

如果整个弹出框被遮罩层覆盖了,设置el-dialog上的append-to-body属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。

### 解决方案 为了在 `el-dialog` 组件中实现 `el-dialog__body` 样式的全局覆盖或深度作用,有几种方法可以选择。 #### 方法一:使用 `/deep/` 或 `::v-deep` 当使用带有 `scoped` 属性的 `<style>` 标签时,可以通过添加 `/deep/` 或者 `::v-deep` 来使样式穿透到子组件。这种方式适用于局部样式修改[^1]: ```scss <style lang="scss" scoped> /deep/ .iframe-dialog { .el-dialog__header { padding: 0 !important; } .el-dialog__body { padding: 0 !important; } } </style> ``` 或者采用更现代的方式使用 `::v-deep`: ```scss <style lang="scss" scoped> .my-dialog-name ::v-deep .el-dialog { .el-dialog__header { text-align: left; background-color: #1482f0; border-bottom: 1px solid #e8eaec; } .el-dialog__body { // 自定义样式 } .el-dialog__footer { text-align: center; } } </style> ``` 这种方法能够确保样式只应用于特定类名下的对话框,而不会影响整个应用程序中的其他部分[^2]。 #### 方法二:移除 `scoped` 并限定范围 如果希望在整个应用范围内更改所有 `el-dialog` 的默认行为,则可以直接在一个不带 `scoped` 属性的 `<style>` 中定义所需样式,并通过指定唯一的类来限制其影响力[^4]: ```scss <style lang="scss"> .custom-dialog-class.el-dialog { .el-dialog__header { text-align: left; background-color: #1482f0; border-bottom: 1px solid #e8eaec; } .el-dialog__body { // 定义新的 body 样式 } .el-dialog__footer { text-align: center; } } </style> ``` 此时需要注意的是,虽然这样做可以让样式生效于所有的 `el-dialog` 实例,但也可能会影响到不需要此样式的页面元素;因此建议总是尽可能地缩小选择器的作用域以避免不必要的副作用。 #### 注意事项 - 使用 `scoped` 加深选择符(如 `/deep/`, `::v-deep`)可以使样式仅限于当前组件内的 DOM 结构,从而减少潜在冲突的风险。 - 如果遇到样式仍然未按预期工作的情况,请确认目标 HTML 元素确实存在并具有相应的 class 名称。 - 对于 Vue CLI 3 及以上版本,推荐使用 `::v-deep` 而不是 `/deep/` ,因为后者已被弃用[^3].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值