Breadstick是一个全新的Vue.js通知组件，用于在Web应用程序上呈现灵活的，可自定义的Toast消息。

安装和下载：

# Yarn
$ yarn add breadstick

# NPM
$ npm install breadstick --save

使用：

1.安装并注册Vue Breadstick组件。

import Vue from 'vue'
import Breadstick from 'breadstick'

Vue.use(Breadstick)

// 或
const breadstick = new Breadstick()

2.使用该notify方法创建基本的Toast消息。

this.$breadstick.notify('这是一个消息提示');

3.它还可以与JSX和Vue.js渲染功能一起使用。

import Alert from './components/Alert'

export default {
  name: 'app',
  mounted () {
    const showAlert = () => alert('Hello!')
    breadstick.notify(({ onClose }) => {
      return (
        
          An JSX Alert notification
        
      )
  }
}

import Alert from './components/Alert'

export default {
  name: 'app',
  mounted () {
    this.$breadstick.notify(({ h, onClose }) => {
      return h(Alert, {
        on: {
          click: onClose
        }
      }, 'A render function Alert notification')
    })
  }
}

4.更改Toast的位置。可用位置：“顶部”，“底部”，“左上”，“右上”，“左下”，“右下” （‘top’, ‘bottom’, ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’.）。

const breadstick = new Breadstick({
      position: 'bottom'
})

5.更改自动消除Toast消息之前的等待时间。默认值：5000ms

const breadstick = new Breadstick({
      duration: 6000
})

---

官网：https://github.com/codebender828/breadstick

演示：https://www.vue365.cn/code_demo.php?id=268

GitHub下载：https://github.com/codebender828/breadstick/archive/master.zip