element notification 自定义类名怎么使用

要在 Element Notification 中使用自定义类名，可以使用 `custom-class` 属性。这个属性可以接收一个字符串，用于指定你想要添加到 Element Notification 根元素上的自定义类名。

例如，如果你想要添加一个名为 `my-notification` 的自定义类名，可以这样写：

<el-notification
  :title="title"
  :message="message"
  :duration="duration"
  :position="position"
  custom-class="my-notification"
></el-notification>

然后，在你的 CSS 中，你就可以使用 `.my-notification` 选择器来定义这个自定义类名对应的样式了。

.my-notification {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  color: #333;
}

这样，你的自定义类名就会应用到 Element Notification 中了。

相关问题

ElNotification({ message: errorMessage, dangerouslyUseHTMLString: true, type: 'warning', customClass: 'my-notification-warning' // 添加自定义类名 }) .my-notification-warning .el-notification__content { background-color: #ff4949; // 设置背景颜色为红色 color: #ffffff; }为什么背景颜色只在中间有

这个代码片段中的 `ElNotification` 是一个使用 Element UI 组件库中的通知组件来显示错误信息的函数。根据代码，`customClass: 'my-notification-warning'` 属性是用来给通知组件添加自定义类名 `my-notification-warning` 的。而这个自定义类名被用来修改通知组件中的样式。

根据代码片段中的 CSS 样式，`.my-notification-warning .el-notification__content` 选择器是用来选中通知组件中的内容区域。而 `background-color` 属性设置的是背景颜色为红色，`color` 属性设置的是文本颜色为白色。

根据你的描述，背景颜色只在中间有，这可能是因为你的通知内容不够长，在内容区域的上下方会出现一些空白区域，这些空白区域的背景颜色是默认的，没有被修改为红色。要解决这个问题，你可以在 CSS 样式中添加一些额外的属性，例如 `padding` 或者 `margin`，来增加内容区域的高度。

element-plus ElMessage 换行 显示

在 element-plus 中，ElMessage 组件已经被废弃，取而代之的是 ElNotification 和 ElMessageBox。如果你想在 element-plus 中实现消息的换行显示，可以使用 ElNotification 或者 ElMessageBox 的 content 参数，并在内容中使用 `<br>` 标签或者 CSS 的 `white-space: pre-line` 属性来实现。

方法一：使用 `<br>` 标签

this.$notification({
  title: '标题',
  message: '第一行内容<br>第二行内容',
  dangerouslyUseHTMLString: true
});

方法二：使用 CSS 属性

this.$notification({
  title: '标题',
  message: '第一行内容\n第二行内容',
  customClass: 'notification-multiline'
});

.notification-multiline .el-notification__content {
  white-space: pre-line;
}

以上两种方法都可以实现在 element-plus 的通知组件中换行显示内容。注意在使用 `<br>` 标签时，需要将 `dangerouslyUseHTMLString` 设置为 `true`，以确保 HTML 标签被解析为实际的换行符。而使用 CSS 属性时，通过为通知组件添加自定义类名，并为该类名定义 `white-space: pre-line` 属性来实现换行显示。