Element Alert警告的具体使用方法

更新时间：2020年07月27日 09:43:57 作者：ForeverJPB.

这篇文章主要介绍了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警告内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3 使用Vuex和router的注意事项及操作方法
在vue2中使用的 this.$route 和 this.$router this.$store的使用在vue3中完全适用，这篇文章主要介绍了Vue3 使用Vuex和router的注意事项及操作方法,需要的朋友可以参考下
2022-12-12
vue和react项目中key的作用示例详解
这篇文章主要为大家介绍了vue和react项目中key的作用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
vue获取form表单的值示例
今天小编就为大家分享一篇vue获取form表单的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
在Vue中使用WebScoket 会怎么样？
这篇文章主要介绍了在Vue中使用WebScoket，网络的不稳定而断开连接，webscoket不会出现异常，下面就一起进入文章看看吧
2022-01-01
axios模块化封装实例化及vue本地解决跨域方案
这篇文章主要为大家介绍了axios模块化封装实例化及vue本地解决跨域示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
详解van-cell如何使用插槽
这篇文章主要为大家介绍了van-cell如何使用插槽详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-12-12
Vue router-view和router-link的实现原理
这篇文章主要介绍了Vue router-view和router-link的实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue-test-utils初使用详解
这篇文章主要介绍了vue-test-utils初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue中注册组件的两种方式详解(全局注册&& 局部注册)
vue 是一个完全支持组件化开发的框架，组件之间可以进行相互的引用，这篇文章主要介绍了vue中注册组件的两种方式详解(全局注册&& 局部注册),需要的朋友可以参考下
2023-06-06
Vue请求JSON Server服务器数据的实现方法
这篇文章主要介绍了Vue请求JSON Server服务器数据的实现方法,需要的朋友可以参考下
2018-11-11