# mtoast-vue-plugin

> A Toast vue-component for Web Application

Latest version **1.3.0** (published 2019-05-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install mtoast-vue-plugin
pnpm add mtoast-vue-plugin
yarn add mtoast-vue-plugin
bun add mtoast-vue-plugin
```

## 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.3.0 |
| Published | 2019-05-12 |
| First published | 2019-02-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 206.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | richardadda |
| Keywords | vue, component, toast, plugin, npm |

## Links

- npm: https://www.npmjs.com/package/mtoast-vue-plugin
- Repository: https://github.com/richardadda/mtoast-vue-plugin
- Homepage: https://github.com/richardadda/mtoast-vue-plugin#readme
- Issues: https://github.com/richardadda/mtoast-vue-plugin/issues
- npm.io page: https://npm.io/package/mtoast-vue-plugin

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2019-05-12
- 1.2.0 — 2019-03-07
- 1.1.8 — 2019-03-02
- 1.1.7 — 2019-03-02
- 1.1.6 — 2019-03-01
- 1.1.5 — 2019-03-01
- 1.1.3 — 2019-02-28
- 1.1.2 — 2019-02-28

## README

# mtoast-vue-component
A Toast vue-component for Web Application



### Characteristic Description

> - Lightweight plug-ins, independently, for Vue-Component
> - Cover common situations(Successful state, Failure state, Warning state, Ordinary state)
> - Support HTML strings
> - ……

> [中文文档](https://github.com/richardadda/mtoast-vue-plugin/blob/master/README.zh-CN.md)



### Update Log Records

> - 2019-05-12 @v1.3.0
>
>   A new control parameter is added named 'isShowClose ', used to control whether the right close-tag is displayed, default to false
>
> - 2019-03-08 @v1.2.0
>
>   A new control parameter is added named 'isShowDot ', used to control whether the left circle is displayed, default to true
>
> - 2019-03-02 @v1.1.8
>
>   Repackaged files, and fixed the document
>
> - 2019-03-01 @v1.1.5
>
>   Modified a parameter:  'delay', Modified to 'duration'
>
> - 2019-02-28 @v1.1.4
>
>   Tips method is added, use it, common text or text with HTML Tags prompts can be displayed. See below for details
>
>   Modified the calculation method of the distance from top of toast to top of viewport
>
>   Modified the default hidden latency, modification from 2000ms to 2500ms
>
>
> - ……



### Run

```
cd ./config

vim webpack.dev.config.js

Modify the corresponding IP and port

npm run server
```



### Interface Specification

#### get & install

```
// install
npm install mtoast-vue-plugin --save-dev
```

#### initial

```
// import
import Vue from 'vue'
import Mtoast from 'mtoast-vue-plugin'

// use
Vue.use( Mtoast.vMtoast );
```

#### use

```
// type: success
this.$mtoast.success(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. disappeared after 5 seconds
    isShowDot: true,  // default value: true. show dot in left area
    isShowClose: false  // default value: false. hide close-tag:X in right area
}
```

```
// type:  warn
this.$mtoast.warn(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. Disappeared after 5 seconds
    isShowDot: true,  // default value: true. show dot in left area
    isShowClose: false  // default value: false. hide close-tag:X in right area
}
```

```
// type:  error
this.$mtoast.error(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. Disappeared after 5 seconds
    isShowDot: true,  // default value: true. show dot in left area
    isShowClose: false  // default value: false. hide close-tag:X in right area
}
```

```
// type:  tips
this.$mtoast.tips(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. Disappeared after 5 seconds
    isShowDot: false,  // default value: true. hide dot in left area
    isShowClose: true  // default value: false. show close-tag:X in right area
}
```





### UI

> ##### Common-Type
>
>  ##### ![avatar](./readme/images/showMtoastTips.png)

> ##### Success-Type
>
>  ##### ![avatar](./readme/images/showMtoastSucc.png)

> ##### Error-Type or Failure-Type
>
>  ##### ![avatar](./readme/images/showMtoastError.png)

> ##### Warning-Type
>
> ##### ![avatar](./readme/images/showMtoastWarn.png)

> ##### Long text, width Warning-Type
>
>  ##### ![avatar](./readme/images/showMtoastWarnLongString.png)

> ##### Especial text with HTML Tags, with Error-Type
>
>  ##### ![avatar](./readme/images/showMtoastErrHtmlString.png)

> ##### Especial text with HTML Tags, with Common-Type
>
>  ##### ![avatar](./readme/images/showMtoastTipsHtmlString.png)

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