vue 插件 toast_Vue / Vue2的Toast插件

vue 插件 toast

Vue简易吐司 (Vue-Easy-Toast)

A toast plugin for vue/vue2.

vue / vue2的Toast插件。

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

注意：从1.xx版本开始，仅支持Vue 2。 对于Vue 1用户，请坚持使用版本0.xx

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

欢迎期号/公关，我会尽快回复。

用法 (Usage)

安装 (install)

npm install vue-easy-toast --save

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>')

更多 (More)

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

toast或$toast带有2个参数：( (message, [options])

造型 (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.

除了极少的样式外， vue-easy-toast尽量不要对外观有所怀疑。 它只是一个包裹了span (class =“ et-content”)的div (class =“ et-wrapper”)。 随意将它们或以className传入的您自己CSS应用于您CSS。

例 (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'
})

翻译自: https://vuejsexamples.com/a-toast-plugin-for-vue-vue2/

vue 插件 toast