SfAlert sf提示

• 示例
  • 基本用法
• API
  • Props/Attrs
  • Slots
  • Events

sf-alert

这是一个sf-alert的组件

示例

基本用法

props

| 参数 | 默认值 | 是否是必填 | 类型 |可选值 |名称| |----- |------------------|------- |-------------------|------ |----| | type | info | false| String | info warning danger success | 类型 其中info会读取环境的 $--color-primary变量| | title | - | false| String | - | 标题 | | showIcon | true | false| Boolean | true false | 是否显示左侧icon | | icon | prompt-filling | false| Boolean | notification、cry、meh、smile、help 、prompt、success、time、warning | 显示左侧icon,如需要填充类型，可在类型后面加上-filling | |iconSize |20px| false| String Number | - | 左侧icon的大小 | |content|-|false| String |-|内容区域|

slot

| 参数 | 名称 | |-----|------------------------------------------------| |title| 如果存在title的slot 则导入的参数title 不会生效，slot会顶掉title部分 | |content|如果存在content的slot 则导入的参数content 不会生效，slot会顶掉content部分|

event

| 函数名 | 名称 | |-------|----------------| | close | alert 关闭的触发的函数 |

<sf-alert type='info' title="这里是标题 这里是标题">
    <div class="self-title" slot="title">这是slot传入的标题</div>
</sf-alert>
<sf-alert type='warning' :showIcon='false' title="不显示左侧icon"></sf-alert>
<sf-alert type='danger' icon='prompt' title='这是标题' content='这是内容区域' ></sf-alert>
<sf-alert type='success' icon="smile-filling" title="这个alert 是content slot">
    <div slot="content">
        <i class="iconfont icon-notification"></i>
        <i class="iconfont icon-notification-filling"></i>
        <i class="iconfont icon-cry"></i>
        <i class="iconfont icon-cry-filling"></i>
        <i class="iconfont icon-meh"></i>
        <i class="iconfont icon-meh-filling"></i>
        <i class="iconfont icon-smile"></i>
        <i class="iconfont icon-smile-filling"></i>
        <i class="iconfont icon-help"></i>
        <i class="iconfont icon-help-filling"></i>
        <i class="iconfont icon-prompt"></i>
        <i class="iconfont icon-prompt-filling"></i>
        <i class="iconfont icon-success"></i>
        <i class="iconfont icon-success-filling"></i>
        <i class="iconfont icon-time"></i>
        <i class="iconfont icon-time-filling"></i>
        <i class="iconfont icon-warning"></i>
        <i class="iconfont icon-warning-filling"></i>
    </div>
</sf-alert>

API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | type | string | 'info''warning''danger''success' | 'info' | 类型 其中info会读取环境的 $--color-primary变量 | | title | string | | '' | 标题 | | showIcon | Boolean | truefalse | true | 是否显示左侧icon | | icon | string | 'notification''cry''meh''smile''help''prompt''success''time''warning' | '' | 显示左侧icon,如需要填充类型，可在类型后面加上-filling | | iconSize | string,number | | '20px' | 左侧icon大小 | | content | String | | '' | 内容区域 |

Slots

title

插入的title,优先级比prop的title高。

content

插入的content,优先级比prop的content高。

Events

@close

关闭时触发