sf-alert.vue

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

关闭时触发