vue-toast

demo

DEMO Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build

How to install from code source

import Toast from './components/toast'
//change any config u like refer to the `toastDefaultOptions`,such as this one below:(可以在初始化的时候修改参数,参照下面的例子:)
// Toast.config({
// // position:'top'
// })
Vue.use(Toast)

How to install from NPM

npm install vue-bajiantoast --save
install into Vue:
import Toast from 'vue-bajiantoast'
import 'vue-bajiantoast/dist/vue-bajiantoast.min.css'
Vue.use(Toast)

How to use

 methods:{
 success(){
 this.$toast.success('我是标题','大家好,我是内容O(∩_∩)O~~')
 },
 title(){
 this.$toast.success('我是标题')
 },
 config(){
 //1、这种形式只能修改一次,如果想修改参数用config()
 // this.$toast.show({
 // icon:null,
 // // title:'我是标题123',
 // text:"我是内容 我没有左边的图标,我不能被关闭",
 // showCloseBtn:false
 // })
 //2、 config():
 this.$toast.config({
 icon:null,
 showCloseBtn:false,
 position:'top'
 })
 this.$toast.error('我是标题','大家好,我是内容O(∩_∩)O~~')
 this.$toast.text('我是标题','大家好,我是内容O(∩_∩)O~~')
 },
 error(){
 this.$toast.error('我是标题','大家好,我是内容O(∩_∩)O~~')
 },
 info(){
 this.$toast.info('我是标题','大家好,我是内容O(∩_∩)O~~')
 },
 warn(){
 this.$toast.warn('我是标题','大家好,我是内容O(∩_∩)O~~')
 },
 text(){
 this.$toast.text('我是标题','大家好,我是内容O(∩_∩)O~~')
 },
 }

//this is the dafault options (这是默认的参数) 
// var toastDefaultOptions = {
// duration: 5000,
// position: 'bottom',//top,bottom,center + left,right,center.such as 'top right' or 'bottom left'
// type: 'default',
// //filter of the same toast (避免重复提示)
// distinct: false,
// mobile: isMobile,
// icon: toastDefaultIcon,
// showCloseBtn: !isMobile,
// //toast gap (toast的间距)
// gap: 5
// };