https://github.com/webkong/vue3-toast
A vue.js 3.0 toast plugin. Support composition API.
https://github.com/webkong/vue3-toast
composition-api plugin toast vue-plugin vue3 vuejs3
Last synced: 4 months ago
JSON representation
A vue.js 3.0 toast plugin. Support composition API.
- Host: GitHub
- URL: https://github.com/webkong/vue3-toast
- Owner: webkong
- License: other
- Created: 2020-12-02T09:11:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-17T06:58:20.000Z (almost 3 years ago)
- Last Synced: 2025-10-08T13:14:52.701Z (8 months ago)
- Topics: composition-api, plugin, toast, vue-plugin, vue3, vuejs3
- Language: Vue
- Homepage:
- Size: 129 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-toast-single
A toast plugin for vue3. Support composition API.
See the [example](https://blog.webkong.cn/vue3-toast/example/index.html).
**Note:**
Issue/PR is welcomed, I'll response as soon as possible.
If you like this plugin, can give a star.
## Usage
### install
`npm install vue3-toast-single --save`
### Quickstart
```javascript
// import
import Toast from 'vue3-toast-single'
import 'vue3-toast-single/dist/toast.css'
const app = createApp(App);
app.use(Toast, { verticalPosition: "bottom", duration: 1500 });
app.mount("#app");
// Usage
{
// ....
methods: {
clickHandler() {
this.$wkToast('A toast.');
},
},
// ...
}
{
// ...
setup() {
const toast = Vue.inject("WKToast");
const clickHandler = () => {
toast("A toast.");
};
return {
clickHandler,
};
},
// ...
}
```
### Config
`toast` or `$wkToast` takes 2 parameter: `(message, [options])`
#### Options
Parameter | Type |Default| Description
--------- | ---- | ------|-----------
className | `string`, `array` | | Self-defined class names to pass through. There are 3 pre-defined classes: `wk-info`, `wk-warn`,`wk-alert`, to toast with different background color
horizontalPosition | `string` | `center` | Position horizontal of toast. There are 3 pre-defined positions: `left`, `right` and `center`
verticalPosition | `string` | `bottom` | Position vertical of toast. There are 2 pre-defined positions: `top` and `bottom`
duration | `number` | 3000 | The duration one toast will last, in milliseconds
closeable | `boolean` | `false` | `true` or `false`. If `true`, the toast can be closed manually
transition | `string` | `slide-down` | Built-in transitions: `fade`, `slide-[up/down/left/right]`. See also [Transitions](http://v1.vuejs.org/guide/transitions.html)
#### Styling
Besides minimum styling, *vue3-toast-single* try not to be opinionated about the appearance. It is a simply a `div`(class="wk-wrapper") wrapped a `span`(class="wk-content"). Apply your css freely with them or with your own classes passed in as `className`.
#### config example
```javascript
// global
app.use(Toast, { verticalPosition: "bottom", duration: 1500 });
// local
this.$wkToast('A toast', {
className: ['my-toast', 'toast-warning'],
horizontalPosition: 'right',
verticalPosition: 'top',
duration: 3000,
transition: 'transition'
})
```
#### TODO
- [ ] Add a queue mode
- [ ] emoji
## License
MIT