https://github.com/museui/muse-ui-toast
toast plugin base on muse-ui
https://github.com/museui/muse-ui-toast
muse-ui vue vue-component vuejs2
Last synced: about 2 months ago
JSON representation
toast plugin base on muse-ui
- Host: GitHub
- URL: https://github.com/museui/muse-ui-toast
- Owner: museui
- License: mit
- Created: 2018-06-15T03:07:23.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-29T09:56:47.000Z (almost 7 years ago)
- Last Synced: 2025-03-21T03:34:26.768Z (2 months ago)
- Topics: muse-ui, vue, vue-component, vuejs2
- Language: JavaScript
- Size: 78.1 KB
- Stars: 11
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Muse-UI-Toast
Muse-UI plugin toast
## Installation
```bash
npm install muse-ui-toast -S
// or
yarn add muse-ui-toast
```
## CDN
```html
```
## Usage
```javascript
import Vue from 'vue'
import MuseUIToast from 'muse-ui-toast';
Vue.use(MuseUIToast);
new Vue({
methods: {
toast () {
this.$toast.message('hello world');
this.$toast.success('hello world');
this.$toast.info('hello world');
this.$toast.warning('hello world');
this.$toast.error('hello world');
}
}
});
// Or
MuseUIToast.message('hello world');
MuseUIToast.success('hello world');
MuseUIToast.info('hello world');
MuseUIToast.warning('hello world');
MuseUIToast.error('hello world');
```
## API
### config
`Vue.use(MuseUIToast, config)` change default config
```javascript
export default {
position: 'bottom', // position
time: 2000, // show time length
closeIcon: 'close', // close icon
close: true, // show close button
successIcon: 'check_circle', // success icon
infoIcon: 'info', // info icon
warningIcon: 'priority_high', // warning icon
errorIcon: 'warning' // error icon
};
```
### config (config)
Change default config, Will return new config;
### message(options)
Show default message, Will return `id`;
### success(options)
Show default success message, Will return `id`;
### info(options)
Show default info message, Will return `id`;
### error(options)
Show default error message, Will return `id`;
### warning(options)
Show default warning message, Will return `id`;
### options
| Name | Description | Type | Accepted Values | Default |
|------|-------------|------|-----------------|---------|
| message | show message content | String | — | — |
| time | show time length | Number | — | 2000 |
| position | show position | String | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom |
| close | Whether the show close button | Boolean | — | true |
| icon | left icon | String | — | — |
| actions | action buttons, | Array, [{ action: '', click: (id) => {} }] | — | — |
| color | color | String | — | — |
| textColor | message text color | String | — | — |
### close (id)
close message
## Dependencies Muse-UI Components
* `mu-snackbar`
* `mu-button`
* `mu-icon`
## Licence
muse-ui-toast is open source and released under the MIT Licence.
Copyright (c) 2018 myron