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

028_Alert警告相关推荐

python 把一个字典赋值给一个空的字典,或者是列表赋值给一个空的列表显示黄色警告
如下图看到的显示一个黄色的警告,但是不影响打印结果或者是list 同样显示警告最后测试发现不需要重新自定义一个空的字典或者空的列表,直接赋值就行如下
警告 '_'用作标识符， JavaSE8 之后的发行版中可能不支持使用'_'作为标识符
今天ui给图导入项目之后运行出现下图的警告然后有弹出,看下图就知道那个图片命名开头有下划线_ 找到加载图片的地方果然图片命名不正确,更改图片的名字之后警告即可消失关于as 图片命名规则,可以看 ...
屏蔽Drupal中的“Notice: Undefined index”警告
原因:drupal默认使用E_ALL,即输出所有错误和警告.我们只需要修改错误显示级别即可. 方法: 1. 打开\sites\default\settings.php 追加一行 ini_set('er ...
c 远程编辑linux文件,makefile - 在远程Linux机器上编译C ++ - “检测到时钟偏差”警告...
makefile - 在远程Linux机器上编译C ++ - "检测到时钟偏差"警告我通过PuTTY和WinSCP连接到我大学的小型Linux集群,使用后者传输文件,并使用前者编 ...
安装vim-go插件之后遇到的gopls警告信息不消失的问题的解决方法
原由因为新冠肺炎疫情蔓延,2020年初宅在家里的这一个多月,我手头只有一台自己的retina MacBook Pro(后文简称rMBP),公司配发的笔记本过年放假没有带回家,年后公司远程办公,需要电 ...
转载iOS开发中常见的警告及错误
iOS警告收录及科学快速的消除方法前言:现在你维护的项目有多少警告?看着几百条警告觉得心里烦么?你真的觉得警告又不是错误可以完全不管么? 如果你也被这些问题困惑,可以和我一起进行下面的操作.其实 ...
【FFmpeg】警告：[mpegts] H.264 bitstream error, startcode missing, size 0
1.问题描述在使用FFmpeg编程,编码成h.264后,再封装成hls时,报警告 [mpegts] H.264 bitstream error, startcode missing, size 0 ...
【FFmpeg】警告：[hls] pkt.duration = 0, maybe the hls segment duration will not precise
1.问题描述在使用ffmpeg编程生成m3u8文件时,报警告 [hls @ 0x7f26b4181840] pkt->duration = 0, maybe the hls segment d ...
【FFmpeg】解决警告warning: xxx is deprecated [-Wdeprecated-declarations]的方法
1.问题描述编译FFmpeg程序时,经常报一些关于"deprecated"的警告信息,具体内容如下: decode.cpp:28:2: warning: 'void av_reg ...

028_Alert警告

028_Alert警告相关推荐

最新文章

热门文章