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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python交互式图形编程实例(二)
2017/11/17 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
什么是URL
2015/12/13 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
大学总结自我鉴定
2014/01/18 职场文书
《金子》教学反思
2014/04/13 职场文书
和解协议书
2014/04/16 职场文书
人代会标语
2014/06/30 职场文书
公司人事任命通知
2015/04/20 职场文书
中学团支部工作总结
2015/08/13 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python