样式
<transition name="el-alert-fade">
<div
class="el-alert"
:class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
v-show="visible"
role="alert"
>
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
<div class="el-alert__content">
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
<slot name="title">{{ title }}</slot>
</span>
<p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
<p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
</div>
</div>
</transition>
class:
el-alert为默认样式
typeClass关联着primary,info,warning,success,error等类别的颜色
is-center: 根据center属性决定是否居中
is-effect:根据effect效果决定dark/light
icon默认为el-alert__icon,
showIcon决定是否显示
iconClass可选择其它icon
isBigIcon决定icon大小
icon-alert-content包括有无插槽的布局,分为标题插槽和内容插槽
标题插槽可以默认el-alert__title,默认isBoldTitle,可以自定义写入
内容都插槽沿用el-alert__description的样式,可以默认,可以自己单独用插槽写入
关闭按钮绝对定位于右上角,默认关闭图标el-alert__closebtn,根据是否具有closeText,来判断给予样式is-customed,根据closable,决定是否显示关闭
Slot
title并不是必填,但几乎都用成了必填
Name | Description |
---|---|
— | 描述 |
title | 标题的内容 |
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
<slot name="title">{{ title }}</slot>
</span>
样式相关属性
alert的属性基本都与样式相关
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题 | string | — | — |
type | 主题 | string | success/warning/info/error | info |
description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
closable | 是否可关闭 | boolean | — | true |
center | 文字是否居中 | boolean | — | true |
close-text | 关闭按钮自定义文本 | string | — | — |
show-icon | 是否显示图标 | boolean | — | false |
effect | 选择提供的主题 | string | light/dark | light |
props: {
title: {
type: String,
default: ''
},
description: {
type: String,
default: ''
},
type: {
type: String,
default: 'info'
},
closable: {
type: Boolean,
default: true
},
closeText: {
type: String,
default: ''
},
showIcon: Boolean,
center: Boolean,
effect: {
type: String,
default: 'light',
validator: function(value) {
return ['light', 'dark'].indexOf(value) !== -1;
}
}
},
计算属性computed
计算属性里面基本上都与样式相关
computed: {
typeClass() {
return `el-alert--${ this.type }`;
},
iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
},
isBigIcon() {
return this.description || this.$slots.default ? 'is-big' : '';
},
isBoldTitle() {
return this.description || this.$slots.default ? 'is-bold' : '';
}
}
数据定义Data
判断显示隐藏的变量
data() {
return {
visible: true
};
},
方法Methods
关闭,触发事件
methods: {
close() {
this.visible = false;
this.$emit('close');
}
},
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
close | 关闭alert时触发的事件 | — |
scss说明
@import "mixins/mixins";
@import "common/var";
@include b(alert) {
width: 100%;
padding: $--alert-padding;
margin: 0;
box-sizing: border-box;
border-radius: $--alert-border-radius;
position: relative;
background-color: $--color-white;
overflow: hidden;
opacity: 1;
display: flex;
align-items: center;
transition: opacity .2s;
@include when(light) {
.el-alert__closebtn {
color: $--color-text-placeholder;
}
}
@include when(dark) {
.el-alert__closebtn {
color: $--color-white;
}
.el-alert__description {
color: $--color-white;
}
}
@include when(center) {
justify-content: center;
}
@include m(success) {
&.is-light {
background-color: $--alert-success-color;
color: $--color-success;
.el-alert__description {
color: $--color-success;
}
}
&.is-dark {
background-color: $--color-success;
color: $--color-white;
}
}
@include m(info) {
&.is-light {
background-color: $--alert-info-color;
color: $--color-info;
}
&.is-dark {
background-color: $--color-info;
color: $--color-white;
}
.el-alert__description {
color: $--color-info;
}
}
@include m(warning) {
&.is-light {
background-color: $--alert-warning-color;
color: $--color-warning;
.el-alert__description {
color: $--color-warning;
}
}
&.is-dark {
background-color: $--color-warning;
color: $--color-white;
}
}
@include m(error) {
&.is-light {
background-color: $--alert-danger-color;
color: $--color-danger;
.el-alert__description {
color: $--color-danger;
}
}
&.is-dark {
background-color: $--color-danger;
color: $--color-white;
}
}
@include e(content) {
display: table-cell;
padding: 0 8px;
}
@include e(icon) {
font-size: $--alert-icon-size;
width: $--alert-icon-size;
@include when(big) {
font-size: $--alert-icon-large-size;
width: $--alert-icon-large-size;
}
}
@include e(title) {
font-size: $--alert-title-font-size;
line-height: 18px;
@include when(bold) {
font-weight: bold;
}
}
& .el-alert__description {
font-size: $--alert-description-font-size;
margin: 5px 0 0 0;
}
@include e(closebtn) {
font-size: $--alert-close-font-size;
opacity: 1;
position: absolute;
top: 12px;
right: 15px;
cursor: pointer;
@include when(customed) {
font-style: normal;
font-size: $--alert-close-customed-font-size;
top: 9px;
}
}
}
.el-alert-fade-enter,
.el-alert-fade-leave-active {
opacity: 0;
}