# sf-alert.vue

Latest version **0.1.4** (published 2022-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install sf-alert.vue
pnpm add sf-alert.vue
yarn add sf-alert.vue
bun add sf-alert.vue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2022-04-02 |
| First published | 2022-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | bypanghu, successhr_fe |
| Keywords | vusion, material, component, successHr, sfcode |

## Links

- npm: https://www.npmjs.com/package/sf-alert.vue
- Homepage: https://static-vusion.163yun.com/packages/sf-alert.vue@0.1.4/index.html
- npm.io page: https://npm.io/package/sf-alert.vue

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.1.4 (latest) — 2022-04-02
- 0.1.3 — 2022-04-01
- 0.1.2 — 2022-04-01
- 0.1.1 — 2022-04-01

## README

<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成，为了方便在 GitHub 和 NPM 上查阅。如需修改，请查看源文件 -->

# SfAlert sf提示

- [示例](#示例)
    - [基本用法](#基本用法)
- [API]()
    - [Props/Attrs](#propsattrs)
    - [Slots](#slots)
    - [Events](#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 关闭的触发的函数 |

``` html

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

### Slots

#### title

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

#### content

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

### Events

#### @close

关闭时触发

---
_Source: https://npm.io/package/sf-alert.vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._