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>

主题

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

自定义关闭按钮

<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

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

文字居中

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

带有辅助性文字介绍

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

带有 icon 和辅助性文字介绍

<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

Slot

Events

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

(0)

相关推荐

  • 让JavaScript的Alert弹出框失效的方法禁止弹出警告框

    本文将介绍让JavaScript的Alert弹出框失效的方法,也就是禁止让JS弹出警告框. 因为现在都提倡绿色上网环境,弹出框难免会影响你的心情,所以通过以下代码可将Js弹出框屏蔽掉. <script LANGUAGE="JavaScript"> <!-- window.alert = function(str){ return ; } alert("不能弹出警示框");//--> </script> 实现思路是对"al

  • Bootstrap基本插件学习笔记之Alert警告框(20)

    和前面的模态对话框类似. 0x01 例子 先看一个简单的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • JavaScript SweetAlert插件实现超酷消息警告框

    今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等.和传统的alert相比: SweetAlert 能在页面自动居中,支持桌面环境,移动端和平板,并且高度自定义.接下来看看它的具体使用! HTML 首先引入相应的js和css,该插件不需要jQuery插件的支持: <link

  • C#实现在前端网页弹出警告对话框(alert)的方法

    本文实例讲述了C#实现在前端网页弹出警告对话框(alert)的方法.分享给大家供大家参考.具体如下: 通常我们通过JS生成警告对话框,下面的代码可以帮助你在点击runat=server的按钮时从服务器端生成alert警告对话框 private void MessaegBox(String msg) { Page.Controls.Add(new LiteralControl("window.alert('"+msg+"')")); } protected void

  • Bootstrap警告(Alerts)的实现方法

    Bootstrap 所提供的用于警告的 class,可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..alert-danger)之一,来添加一个基本的警告框. html代码 <div class="alert alert-success"> 成功!很好地完成了提交. </div> <div class=&qu

  • iOS开发中使用UIWebView 屏蔽 alert警告框

    如果是网页内容里面的alert,我们可以等网页加载完毕,也就是在webViewDidFinishLoad中执行下面的js代码,就可以屏蔽alert了 [myWebView stringByEvaluatingJavaScriptFromString:@"window.alert=null;"]; 但上面的方法对于网页onLoad事件里面的alert就不起作用了 解决方法就是给UIWebView添加一个类别: 给工程添加JavaScriptAlert.h @interface UIWeb

  • Bootstrap警告框(Alert)插件使用方法

    有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能. <a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="ext

  • Android Alertdialog(实现警告对话框)

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式.下面我们模拟卸载应用程序时弹出的最为普通的警告对话框,如下图: layout布局界面代码示例: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:

  • Element Alert警告的具体使用方法

    组件-警告 基本用法 <template> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="info"> </el-alert> <el-alert title="警告提示的文案" type="warning&

  • 基于Vuejs和Element的注册插件的编写方法

    1.首先要在HTML文档中引入jQuery版本2.0以下的.一个vuejs库 一个Element-UI库 <script src="js/jquery-1.11.0.min.js"></script> <script src="js/vue.js"></script> <script src="js/Element-UI.js"></script> 2.HTML的布局  &l

  • JS实现alert中显示换行的方法

    本文实例讲述了JS实现alert中显示换行的方法.分享给大家供大家参考,具体如下: 先来介绍一种比较复杂的方法,但这种方法使用起来对所有型号的浏览器都能任意分辨: //浏览器类型判定 function getOs() { if(navigator.userAgent.indexOf("MSIE")>0) { return "IE"; //InternetExplor } else if(isFirefox=navigator.userAgent.indexOf

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • Element Collapse 折叠面板的使用方法

    本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/collapse 基础用法 普通折叠面板 <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div&

  • Element Breadcrumb 面包屑的使用方法

    组件- 面包屑 什么是面包屑导航 一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航.例如: 上面这个图表示我们当前的页面是Breadcrumb面包屑,上一级目录是组件页面,再上一级目录是Element UI页面.当我们点击这些目录时会返回到对应的页面中去.再例如: 上面这个图表示我们当前所在的位置是活动详情页面,上一级目录是活动列表页面-以此类推. 这些就是面包屑导航. 基础用法 <el-breadcrumb separator="/"> <el-bread

  • Element PageHeader页头的使用方法

    组件- 页头 基础 <el-page-header @back="goBack" content="详情页面"> </el-page-header> <script> export default { methods: { goBack() { console.log('go back'); } } } </script> Attributes Events Slots 到此这篇关于Element PageHeader

  • Element Steps步骤条的使用方法

    组件- 通知 基础用法 <el-steps :active="active" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3"></el-step>

随机推荐