Alert 警告提示

概述

静态地呈现一些警告信息，可手动关闭。

使用指南

在.vue中引入组件

<script>
    import iAlert from 'iview-mpvue/dist/components/alert/alert'
    export default {
        components: {
            'i-alert': iAlert
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/alert/style/css'

示例

<i-alert>
    An info prompt
</i-alert>
<i-alert type="success">
    An success prompt
</i-alert>
<i-alert type="warning">
    An warning prompt
</i-alert>
<i-alert type="error">
    An error prompt
</i-alert>
<i-alert type="info">
    An info prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="success">
    An success prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="warning">
    An warning prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="error">
  An error prompt
  <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="info" :show-icon="true">
    An info prompt
</i-alert>
<i-alert type="success" :show-icon="true">
    An success prompt
</i-alert>
<i-alert type="warning" :show-icon="true">
    An warning prompt
</i-alert>
<i-alert type="error" :show-icon="true">
    An error prompt
</i-alert>
<i-alert :show-icon="true" :desc="true">
    An info prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="success" :show-icon="true" :desc="true">
    An success prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="warning" show-icon="true" :desc="true">
    An warning prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert type="error" :show-icon="true" :desc="true">
    An error prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>
<i-alert :closable="true" @close="handleClick">
    An info prompt
</i-alert>
<i-alert type="success" :show-icon="true" :desc="true" :closable="true" @close="handleClick">
    An success prompt
    <div slot="desc">Content of prompt. Content of prompt.</div>
</i-alert>

API

Alert properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
type	警告提示样式，可选值为 info、success、warning、error	String	info
closable	是否可关闭	Boolean	false
show-icon	是否显示图标	Boolean	false
desc	是否设置了 desc slot	Boolean	false

Alert events

事件名	说明	返回值
v-on:close	点击关闭按钮时触发	-

Alert slot

名称	说明
默认	标题
desc	描述内容