vue3-toast-single
v1.0.5
Published
A toast plugin for vue3, support composition API.
Downloads
519
Maintainers
Readme
vue3-toast-single
A toast plugin for vue3. Support composition API.
See the example.
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
// 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
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
// 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