0.1.4 • Published 4 years ago
sf-alert.vue v0.1.4
SfAlert sf提示
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
关闭时触发