el-Notification 在body上 样式无法穿透 怎么解决
时间: 2024-03-12 14:43:23 浏览: 17
如果 `el-Notification` 组件是挂载在 `body` 上,那么使用 CSS 穿透的方式可能会失效。这是因为 `el-Notification` 组件是在 `body` 中动态生成的,而 `body` 是全局的根元素,CSS 穿透的作用范围无法达到。
解决这个问题的方法是在 `el-Notification` 组件上设置一个唯一的 `class`,然后在样式中通过这个 `class` 来修改样式。
例如,给 `el-Notification` 组件设置一个 `class` 为 `my-notification`:
```html
<el-notification class="my-notification" :title="title" :message="message" />
```
然后在样式中通过这个 `class` 来穿透样式:
```css
.my-notification .el-notification__content {
background-color: #f0ad4e;
color: #fff;
}
```
这样就可以成功穿透 `el-Notification` 组件的样式了。
相关问题
el-Notification 样式穿透
el-Notification 是 Element UI 组件库中的通知组件,它的样式可以通过 CSS 穿透的方式进行修改。
穿透方式如下:
1.在样式中使用 ::v-deep 伪元素来穿透样式。
例如,修改通知框背景颜色和字体颜色:
```css
/* 通过 ::v-deep 穿透样式 */
.el-notification__content ::v-deep {
background-color: #f0ad4e;
color: #fff;
}
```
2.在样式中使用 /deep/ 或 >>> 运算符来穿透样式。
例如,修改通知框的圆角大小:
```css
/* 通过 /deep/ 或 >>> 运算符穿透样式 */
.el-notification__group /deep/ .el-notification__content {
border-radius: 10px;
}
```
需要注意的是,以上的样式穿透方式可能会有一定的兼容性问题,建议在实际使用中进行测试。
el -notification通知只显示三个stack属性
`el-notification` 组件默认只显示三个 `stack` 属性,分别是 `title`、`message` 和 `type`。如果你想在通知中显示其他属性,可以使用 `customClass` 属性自定义样式,并在自定义样式中添加需要显示的属性。
例如,在 `el-notification` 组件中添加一个 `duration` 属性,可以按照以下方式进行:
```html
<template>
<el-notification
:title="title"
:message="message"
:type="type"
:duration="duration"
:custom-class="customClass"
>
{{ description }}
</el-notification>
</template>
<script>
export default {
data() {
return {
title: '标题',
message: '消息内容',
type: 'success',
duration: 3000,
description: '这是一条通知消息',
customClass: 'my-notification'
};
}
};
</script>
<style scoped>
.my-notification {
display: flex;
align-items: center;
}
.my-notification .el-notification__content {
margin-left: 10px;
}
.my-notification .el-notification__description {
font-size: 14px;
color: #999;
}
</style>
```
在上面的示例中,我们通过设置 `customClass` 属性自定义了通知样式,并在自定义样式中添加了 `duration` 属性。同时还添加了一个 `description` 属性,用于在通知中显示更多信息。