Element Alert警告的具體使用方法

更新時(shí)間：2020年07月27日 09:43:57 作者：ForeverJPB.

這篇文章主要介紹了Element Alert警告的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件—警告

基本用法

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

自定義關(guān)閉按鈕

<template>
 <el-alert
  title="不可關(guān)閉的 alert"
  type="success"
  :closable="false">
 </el-alert>
 <el-alert
  title="自定義 close-text"
  type="info"
  close-text="知道了">
 </el-alert>
 <el-alert
  title="設(shè)置了回調(diào)的 alert"
  type="warning"
  @close="hello">
 </el-alert>
</template>

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

帶有 icon

<template>
 <el-alert
  title="不可關(guān)閉的 alert"
  type="success"
  :closable="false">
 </el-alert>
 <el-alert
  title="自定義 close-text"
  type="info"
  close-text="知道了">
 </el-alert>
 <el-alert
  title="設(shè)置了回調(diào)的 alert"
  type="warning"
  @close="hello">
 </el-alert>
</template>

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

文字居中

<template>
 <el-alert
  title="不可關(guān)閉的 alert"
  type="success"
  :closable="false">
 </el-alert>
 <el-alert
  title="自定義 close-text"
  type="info"
  close-text="知道了">
 </el-alert>
 <el-alert
  title="設(shè)置了回調(diào)的 alert"
  type="warning"
  @close="hello">
 </el-alert>
</template>

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

帶有輔助性文字介紹

<template>
 <el-alert
  title="帶輔助性文字介紹"
  type="success"
  description="這是一句繞口令：黑灰化肥會揮發(fā)發(fā)灰黑化肥揮發(fā)；灰黑化肥會揮發(fā)發(fā)黑灰化肥發(fā)揮。 黑灰化肥會揮發(fā)發(fā)灰黑化肥黑灰揮發(fā)化為灰……">
 </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