插件名称 | 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
})