element-plus中zm 更改某个特定的ElNotification组件的样式
时间: 2024-03-11 07:49:16 浏览: 203
Element_Plus 分页组件 内部样式修改(较详细)
5星 · 资源好评率100%
要更改某个特定 ElNotification 组件的样式,可以通过 `type` 属性来设置该组件的类型,从而控制它的样式。element-plus 中 Notification 组件支持四种类型:success、warning、info、error。你可以根据需要选择其中一种类型,并在 `createApp` 时使用 `ElNotification` 的 `props` 属性来设置全局默认值。例如:
```js
import { createApp } from 'vue';
import App from './App.vue';
import ElNotification from 'element-plus/lib/el-notification';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElNotification, {
props: {
type: 'warning'
}
});
app.mount('#app');
```
这里将 Notification 的 `type` 属性设置为 `warning`,这意味着所有的 Notification 组件的样式都会按照 `warning` 类型来显示。如果你想更改某个特定的 Notification 组件的样式,可以在创建它时传入一个 `type` 属性来覆盖全局默认值。例如:
```js
this.$notify({
title: '警告',
message: '这是一条警告消息',
type: 'error'
})
```
这里创建了一个 `type` 属性为 `error` 的 Notification 组件,它的样式将会按照 `error` 类型来显示,而不是全局默认的 `warning` 类型。
阅读全文