Notice-Alert警告

r囧r小猫 2022-04-23 07:26 226阅读 0赞

用于页面中展示重要的提示信息。

![20190125000705112.png][]

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

![20190125000912163.png][]

<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>
    <script>
      export default {
        methods: {
          hello() {
            alert('Hello World!');
          }
        }
      }
    </script>

![20190125001050149.png][]

<el-alert
        title="成功提示的文案"
        type="success"
        show-icon>
      </el-alert>
      <el-alert
        title="消息提示的文案"
        type="info"
        show-icon>
      </el-alert>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>主题</td> 
   <td>string</td> 
   <td>success/warning/info/error</td> 
   <td>info</td> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>是否可关闭</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>close-text</td> 
   <td>关闭按钮自定义文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>show-icon</td> 
   <td>是否显示图标</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 1][¶][Link 2]Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>close</td> 
   <td>关闭alert时触发的事件</td> 
  </tr> 
 </tbody> 
</table>

[20190125000705112.png]: /images/20220323/5ff5bf3c9289494bbf395916923c32b1.png
[20190125000912163.png]: /images/20220323/7815e0aac52e4b1b932b4d756954bc7e.png
[20190125001050149.png]: /images/20220323/a8bfff3f700a4a67bbc462b126852abf.png
[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/alert%23slot
[Link 2]: http://element-cn.eleme.io/#/zh-CN/component/alert%23events