@Deveodk/vue-toastr (英语)

由 Code Seven/toastr 所启发的易用烤面包机插件

演示

见功能演示 deveo 演示网站

安装

npm install --save @deveodk/vue-toastr

使用量

Bundler (Webpack, Rollup) (英语)

import Vue from 'vue'
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced
import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'

Vue.use(VueToastr)

浏览器

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.css"></link>
<script src="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.js"></script>

配置

烤面包机默认配置如下:

可用职位:

'toast-top-right'
'toast-bottom-right'
'toast-bottom-left'
'toast-top-left'
'toast-top-full-width'
'toast-bottom-full-width'
'toast-top-center'
'toast-bottom-center'

可用类型 :

'success'
'error'
'info'
'warning'

import VueToastr from '@deveodk/vue-toastr'
Vue.use(VueToastr, {
    defaultPosition: 'toast-bottom-left',
    defaultType: 'info',
    defaultTimeout: 1000
})

使用量

这个 $toastr 原型钩和如何使用.

// Make a success toastr
this.$toastr('success', 'i am a toastr success', 'hello')

// Make a error toastr
this.$toastr('error', 'i am a toastr error', 'hello')

// Make a warning toastr
this.$toastr('warning', 'i am a toastr warning', 'hello')

// Make a info toastr
this.$toastr('info', 'i am a toastr info', 'hello')

// Make a toastr with custom properties
this.$toastr('add', {
  title: 'Heyy', // Toast Title
  msg: 'I am a custom property toastr' // Message
  timeout: 1000, // Timeout in ms
  position: 'toast-bottom-full-width', // Toastr position
  type: 'info', // Toastr type
  closeOnHover: true, // On mouse over stop timeout can be boolean; default true
  clickClose: false, // On click toast close can be boolean; default false
  // Available callbacks
  onCreated: () => console.log('toast was created'),
  onClicked: () => console.log('toast was clicked'),
  onClosed: () => console.log('toast was closed'),
  onMouseOver: () => console.log('toast was moused over'),
  onMouseOut: () => console.log('mouse left the toast')
})

实例

// Using toastr in real world application
<link rel="stylesheet" href="/@deveodk/vue-toastr/dist/vue-toastr.css"></link>
<script src="/@deveodk/vue-toastr/dist/vue-toastr.js"></script>
<script>
new Vue({
  el: 'body',
  mounted: function () {
      this.showToastr()
   },
  methods: {
    showToastr: function () {
        this.$toastr('success', 'it works!', 'Yeahh')
    }
  }
})
</script>

特别谢谢

特别感谢 s4l1小时 用于创建原始软件包。 大约30%的源代码来自vue-toastr

许可证

麻省理工学院