028_Alert警告

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