0.1.4 • Published 2 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 | true false | 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
关闭时触发