@oppobrowser/vue-easy-toast NPM

Vue-Easy-Toast

A toast plugin for vue/vue2.

DEMO

Note: Since 1.x.x, only Vue 2 is supported. For Vue 1 users please stick to version 0.x.x

Issue/PR is welcomed, I'll response as soon as possible.

Usage

install

npm install vue-easy-toast --save

Quickstart

// before start
import Toast from 'vue-easy-toast'

// or a lite version without inline css, then you have to style yourself or manually import 'vue-easy-toast.css'
import Toast from 'vue-easy-toast/dist/vue-easy-toast-lite.min.js'
require('vue-easy-toast/dist/vue-easy-toast.css') // optional

Vue.use(Toast)

// in your code
Vue.toast('Can I have everybody`s attention?')

// or
$vm.$toast('Let me give a toast to you all.')

// or with HTML Tags
$vm.$toast('Hi <strong>Jonh</strong>')

toast or $toast takes 2 parameter: (message, [options])

Options

Parameter	Type	Default	Description
id	`string`	`easy-toast-default`	Unique identifier globally. Use this to create multiple toasts with different setups.
parent	`string`	`body`	Selector of the container (TODO, not ready yet, position is fixed to the window)
className	`string`, `array`		Self-defined class names to pass through. There are 3 pre-defined classes: `et-info`, `et-warn`,`et-alert`, to toast with different background color
horizontalPosition	`string`	`right`	Position horizontal of toast. There are 3 pre-defined positions: `left`, `right` and `center`
verticalPosition	`string`	`top`	Position vertical of toast. There are 2 pre-defined positions: `top` and `bottom`
duration	`number`	5000	The duration one toast will last, in milliseconds
mode	`string`	`override`	`override` or `queue`. If `override`, the last toast will forcibly flush previous
closeable	`boolean`	`false`	`true` or `false`. If `true`, the toast can be closed manually
transition	`string`	`fade`	Built-in transitions: `fade`, `slide-[up/down/left/right]`. See also Transitions

Styling

Besides minimum styling, vue-easy-toast try not to be opinionated about the appearance. It is a simply a div(class="et-wrapper") wrapped a span(class="et-content"). Apply your css freely with them or with your own classes passed in as className.

example

Vue.toast('Hi, there!', {
  id: 'my-toast',
  parent: '#toast-container',
  className: ['my-toast', 'toast-warning'],
  horizontalPosition: 'right',
  verticalPosition: 'top',
  duration: 3000,
  mode: 'queue',
  transition: 'my-transition'
})