# vue-notification-components

> 基于 vue 开发的浏览器端消息弹框组件

Latest version **1.1.0** (published 2020-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-notification-components
pnpm add vue-notification-components
yarn add vue-notification-components
bun add vue-notification-components
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-09-16 |
| First published | 2020-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wyboom |
| Maintainers | wyboom |

## Links

- npm: https://www.npmjs.com/package/vue-notification-components
- Repository: https://github.com/WYBOOM/vue-notification-components
- Homepage: https://github.com/WYBOOM/vue-notification-components#readme
- Issues: https://github.com/WYBOOM/vue-notification-components/issues
- npm.io page: https://npm.io/package/vue-notification-components

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.11

## Recent versions

- 1.1.0 (latest) — 2020-09-16
- 1.0.0 — 2020-09-15

## README

# vue-notification-components

> 基于 vue 开发的浏览器端消息弹框组件（仿 mac 系统弹框）

## 安装

### npm 安装

`npm install vue-notification-components -S`

### script 标签引入

`<srcipt src='/dist/vue-notification-components.js'></srcipt>`

## 引入

### 完整引入

```
import Vue from 'vue'
import App from './App.vue'

import vueNotificationComponents from 'vue-notification-components'

Vue.use(vueNotificationComponents)

new Vue({
  el: '#app',
  render: h => h(App)
})

```

### 按需引入

使用 es6 解构对象，分别使用 vue.use()即可

```
const {wyNotify, ...} = vueNotificationComponents

Vue.use(wyNotify)
...
```

## 组件列表

- wyNotify
- wyMessage

---

## 组件使用文档

### wyNotify

> 通知提醒组件

#### 绑定 wyNotify 方法到 Vue 实例原型链上，通过调用`vue.$wyNotify(options)`显示消息。下面是 options 对象的 key。（options 请使用对象类型）

|   键名    |  值类型  | 是否必填 |                   参数作用                    | 默认值 |
| :-------: | :------: | :------: | :-------------------------------------------: | :----: |
|   title   |  String  |   选填   |                     标题                      |   无   |
|  message  |  String  |   选填   |                   消息内容                    |   无   |
| duration  |  Number  |   选填   | 弹框显示时间，值为 0 时不自动关闭。单位为 ms  |  4000  |
| showClose | Boolean  |   选填   |               是否显示关闭按钮                | false  |
|  iconSrc  |  String  |   选填   | 弹框图标（用 require 或 import 引入相对路径） |   无   |
|  onClose  | Function |   选填   |              消息弹框关闭的回调               |   无   |
|  onClick  | Function |   选填   |            点击消息弹框触发的事件             |   无   |

```
this.$wyNotify({
        duration: 3000,
        title: '标题',
        message: '一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字',
        showClose: true,
        iconSrc: require('../src/assets/蛙.png'),//使用require引入相对路径图片,
        onClick: function () {
          console.log('click')
        },
        onClose: function () {
          console.log('leave');
        }
      })
```

![wyNotify](https://github.com/WYBOOM/vue-notification-components/blob/master/src/assets/wyNotify.gif "wyNotify")

---

### wyMessage

> 消息提示 使用方法与 wyNotify 类似。

|   键名    |  值类型  | 是否必填 |                            参数作用                             | 默认值 |
| :-------: | :------: | :------: | :-------------------------------------------------------------: | :----: |
|  message  |  String  |   选填   |                            消息内容                             |   无   |
| duration  |  Number  |   选填   |          弹框显示时间，值为 0 时不自动关闭。单位为 ms           |  4000  |
| showClose | Boolean  |   选填   |                        是否显示关闭按钮                         | false  |
|   type    |  String  |   选填   | 消息弹框的类型，可选值（info/success/error）,不填或填错取默认值 | 'info' |
|  onClose  | Function |   选填   |                       消息弹框关闭的回调                        |   无   |
|  onClick  | Function |   选填   |                     点击消息弹框触发的事件                      |   无   |

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

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