简单灵活的Toast通知组件– Vue Breadstick

简单灵活的Toast通知组件– Vue Breadstick
插件名称 breadstick
发布时间 2020年4月21日
插件作者 codebender828

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