Giter VIP home page Giter VIP logo

vue-toast's Introduction

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.

vue-toast's People

Contributors

bajian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vue-toast's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.