小鹅通组件

# Alert 警告

用于页面中展示重要的提示信息

# 初始化

单独引入时：在入口js文件处引入

import { Alert, Button } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Alert)
Vue.use(Button)
1
2
3
4

# 效果

# 基本样式-带关闭按钮和icon






<ss-alert title='描述文案，预警提示' type='warning' show-icon closable></ss-alert>
<ss-alert title='描述文案，失败提示' type='error' show-icon closable></ss-alert>
<ss-alert title='描述文案，成功提示' type='success' show-icon closable></ss-alert>
<ss-alert title='描述文案，常规提示' type='primary' show-icon closable></ss-alert>
1
2
3
4

# 图标大小可调整


<ss-alert title='调整图标大小' type='primary' show-icon icon-size='24px'></ss-alert>
1

# 多行文本


<ss-alert 
    title='多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行
    多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行
    多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行'
    type='primary'
    show-icon
    closable
    >
</ss-alert>
1
2
3
4
5
6
7
8
9

# 文字链接


<ss-alert
  title='描述文案-常规提示'
  type='primary'
  link-text='文字链接'
  link='https://www.baidu.com'
  linkMode='blank'
  show-icon
  closable
>
</ss-alert>
1
2
3
4
5
6
7
8
9
10

# 带插槽


操作按钮 操作按钮
 
 <ss-alert
  title='带插槽'
  type='primary'
  show-icon
  closable
>
  <div class="custom-slot">
    <ss-button type="plain">操作按钮</ss-button>
    <ss-button>操作按钮</ss-button>
  </div>
</ss-alert>
1
2
3
4
5
6
7
8
9
10
11

# 参数

参数 说明 类型 默认值 可选值 支持版本
title alert内容，必须传入 String — — -
type alert类型 String primary warning,error,success,primary -
closable 是否显示关闭按钮 Boolean false — -
showIcon 是否显示icon Boolean false — -
iconSize icon大小 String — — -
linkText 文字链接文本 String 文本链接 - 1.3.16及其以上
link 文字链接 String - - 1.3.16及其以上
linkMode 跳转模式 String self self blank 1.3.16及其以上

# 事件

事件名称 说明 回调参数
close 关闭alert时触发的事件 —

← Badge 标记 →