vue-toast

demo

live-demo

github

A Vue.js project

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~~')
    },
  }

####options

//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
// };

For detailed explanation on how things work, checkout the guide and docs for vue-loader.