Element Alert警告的具体使用方法


Posted in Javascript onJuly 27, 2020

组件—警告

基本用法

Element Alert警告的具体使用方法

<template>
 <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>
</template>

主题

Element Alert警告的具体使用方法

<template>
 <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>
</template>

自定义关闭按钮

Element Alert警告的具体使用方法

<template>
 <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>
</template>

<script>
 export default {
  methods: {
   hello() {
    alert('Hello World!');
   }
  }
 }
</script>

带有 icon

Element Alert警告的具体使用方法

<template>
 <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>
</template>

<script>
 export default {
  methods: {
   hello() {
    alert('Hello World!');
   }
  }
 }
</script>

文字居中

Element Alert警告的具体使用方法

<template>
 <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>
</template>

<script>
 export default {
  methods: {
   hello() {
    alert('Hello World!');
   }
  }
 }
</script>

带有辅助性文字介绍

Element Alert警告的具体使用方法

<template>
 <el-alert
  title="带辅助性文字介绍"
  type="success"
  description="这是一句绕口令:黑灰化肥会挥发发灰黑化肥挥发;灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
 </el-alert>
</template>

带有 icon 和辅助性文字介绍

Element Alert警告的具体使用方法

<template>
 <el-alert
  title="成功提示的文案"
  type="success"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
 </el-alert>
 <el-alert
  title="消息提示的文案"
  type="info"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
 </el-alert>
 <el-alert
  title="警告提示的文案"
  type="warning"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
 </el-alert>
 <el-alert
  title="错误提示的文案"
  type="error"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
 </el-alert>
</template>

Attributes

Element Alert警告的具体使用方法

Slot

Element Alert警告的具体使用方法

Events

Element Alert警告的具体使用方法

到此这篇关于Element Alert警告的具体使用方法的文章就介绍到这了,更多相关Element Alert警告内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
extjs 04_grid 单击事件新发现
Nov 27 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Element Badge标记的使用方法
Jul 27 #Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php之XML转数组函数的详解
2013/06/07 PHP
htm调用JS代码
2007/03/15 Javascript
刷新时清空文本框内容的js代码
2007/04/23 Javascript
jquery 插件开发备注
2010/08/27 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
JavaScript WeakMap使用详解
2021/02/05 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python可迭代对象操作示例
2019/05/07 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python登录系统界面实现详解
2019/06/25 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
大数据分析用java还是Python
2020/07/06 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
高中的自我鉴定
2013/12/16 职场文书
初级会计求职信范文
2014/02/15 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
产品生产计划书
2014/05/07 职场文书
个人承诺书格式
2014/06/03 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
志愿者个人总结
2015/03/03 职场文书
前台接待员岗位职责
2015/04/15 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA