1. Alert警告
1.1. Alert警告用于页面中展示重要的提示信息。
1.2. Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
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 |
1.3. Slot
name | 说明 |
— | 描述 |
title | 标题的内容 |
1.4. Events
事件名 | 说明 | 回调参数 |
close | 关闭alert时触发的事件 | 无 |
2. Alert警告例子
2.1. 使用脚手架新建一个名为element-ui-alert的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import BaseAlert from '../components/BaseAlert.vue'
import EffectAlert from '../components/EffectAlert.vue'
import ClosableAlert from '../components/ClosableAlert.vue'
import IconAlert from '../components/IconAlert.vue'
import CenterAlert from '../components/CenterAlert.vue'
import DescriptionAlert from '../components/DescriptionAlert.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/BaseAlert' },
{ path: '/BaseAlert', component: BaseAlert },
{ path: '/EffectAlert', component: EffectAlert },
{ path: '/ClosableAlert', component: ClosableAlert },
{ path: '/IconAlert', component: IconAlert },
{ path: '/CenterAlert', component: CenterAlert },
{ path: '/DescriptionAlert', component: DescriptionAlert }
]
const router = new VueRouter({
routes
})
export default router
2.3. 在components下创建BaseAlert.vue
<template>
<div>
<h1>基本用法</h1>
<h4>页面中的非浮层元素, 不会自动消失。Alert组件提供四种主题, 由type属性指定, 默认值为info。</h4>
<el-alert title="成功提示的文案" type="success"></el-alert>
<el-alert title="消息提示的文案" type="info"></el-alert>
<el-alert title="警告提示的文案" type="warning"></el-alert>
<el-alert title="错误提示的文案" type="error"></el-alert>
</div>
</template>
<style scoped>
.el-alert + .el-alert {
margin-top: 20px;
}
</style>
2.4. 在components下创建EffectAlert.vue
<template>
<div>
<h1>主题</h1>
<h4>Alert组件提供了两个不同的主题: light和dark。通过设置effect属性来改变主题, 默认为light。</h4>
<el-alert title="成功提示的文案" type="success" effect="dark"></el-alert>
<el-alert title="消息提示的文案" type="info" effect="dark"></el-alert>
<el-alert title="警告提示的文案" type="warning" effect="dark"></el-alert>
<el-alert title="错误提示的文案" type="error" effect="dark"></el-alert>
</div>
</template>
<style scoped>
.el-alert + .el-alert {
margin-top: 20px;
}
</style>
2.5. 在components下创建ClosableAlert.vue
<template>
<div>
<h1>自定义关闭按钮-自定义关闭按钮为文字或其他符号</h1>
<h4>在Alert组件中, 你可以设置是否可关闭, 关闭按钮的文本以及关闭时的回调函数。closable属性决定是否可关闭, 接受boolean, 默认为true。你可以设置close-text属性来代替右侧的关闭图标, 注意: close-text必须为文本。设置close事件来设置关闭时的回调。</h4>
<el-alert title="不可关闭的 alert" type="success" :closable="false"></el-alert>
<el-alert title="自定义 close-text" type="info" close-text="知道了"></el-alert>
<el-alert title="设置了回调的 alert" type="warning" @close="hello"></el-alert>
</div>
</template>
<script>
export default {
methods: {
hello () {
alert('Hello World!')
}
}
}
</script>
<style scoped>
.el-alert + .el-alert {
margin-top: 20px;
}
</style>
2.6. 在components下创建IconAlert.vue
<template>
<div>
<h1>带有icon-表示某种状态时提升可读性</h1>
<h4>通过设置show-icon属性来显示Alert的icon, 这能更有效地向用户展示你的显示意图。</h4>
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
</div>
</template>
<style scoped>
.el-alert + .el-alert {
margin-top: 20px;
}
</style>
2.7. 在components下创建CenterAlert.vue
<template>
<div>
<h1>文字居中</h1>
<h4>使用center属性让文字水平居中。</h4>
<el-alert title="成功提示的文案" type="success" center show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" center show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" center show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" center show-icon></el-alert>
</div>
</template>
<style scoped>
.el-alert + .el-alert {
margin-top: 20px;
}
</style>
2.8. 在components下创建DescriptionAlert.vue
<template>
<div>
<h1>带有辅助性文字介绍-包含标题和内容, 解释更详细的警告</h1>
<h4>除了必填的title属性外, 你可以设置description属性来帮助你更好地介绍, 我们称之为辅助性文字。辅助性文字只能存放单行文本, 会自动换行显示。</h4>
<el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令: 黑灰化肥会挥发发灰黑化肥挥发; 灰黑化肥会挥发发黑灰化肥发挥。黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰..."></el-alert>
</div>
</template>
2.9. 运行项目, 访问http://localhost:8080/#/BaseAlert
2.10. 运行项目, 访问http://localhost:8080/#/EffectAlert
2.11. 运行项目, 访问http://localhost:8080/#/ClosableAlert
2.12. 运行项目, 访问http://localhost:8080/#/IconAlert
2.13. 运行项目, 访问http://localhost:8080/#/CenterAlert
2.14. 运行项目, 访问http://localhost:8080/#/DescriptionAlert