https://github.com/steinslin/mpvue-toast

mpvue-toast is a toast plugin for mpvue.
https://github.com/steinslin/mpvue-toast

Last synced: about 2 months ago
JSON representation

mpvue-toast is a toast plugin for mpvue.

• Host: GitHub
• URL: https://github.com/steinslin/mpvue-toast
• Owner: steinslin
• Created: 2018-03-10T15:13:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-03-12T16:46:29.000Z (over 6 years ago)
• Last Synced: 2024-07-27T14:34:27.156Z (about 2 months ago)
• Language: JavaScript
• Size: 714 KB
• Stars: 45
• Watchers: 1
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-mpvue - mpvue-toast - toast 组件 (组件 / 目录)

README

        
# mpvue-toast

> mpvue-toast is a toast plugin for mpvue.

## Screenshots

![](https://raw.githubusercontent.com/linrui1994/mpvue-toast/master/static/u.gif)

## install

```bash

npm install mpvue-toast --save

```

## Usage

```html

  


    

    toggle toast

    

    

  


import toast from 'mpvue-toast'

// import img from 'img.jpg'

// import '@/icon.css'

export default {

  data () {

    return {

      visible: false,

      // img

    }

  },

  components: {

    toast

  },

  methods: {

    setVisible() {

      this.visible = !this.visible

    }

  },

}

```

## props

| 参数        | 说明                      | 类型      | 可选值  | 默认值    |

| ---------  | ----------------------- | ------- | ---- | ------ |

| animate    | 是否启用动画     | Boolean | -    | true   |

| transition | 动画类型，现在支持 `slide` `fade` | String | `slide` `fade` | `slide` |

| duration   | `Toast`的持续时间，单位毫秒       | Number  | -    | 2000   |

| message    | `Toast`的内容              | String  | -    | -      |

| className  | `Toast`的class           | String  | -    | -      |

| img        | 图片                      | String  | -    | -      |

| iconClass  | 图标class，可以使用 `iconfont` | String  | -    | -      |

| position   | `Toast`的显示位置            | String  | `top` `center` `bottom` | `center` |

| visible    | 控制`Toast`的显示，支持`sync`   | Boolean | -    | -      |

## TODO

- [ ] api

- [ ] test

## Other Components

- [mpvue-ripple](https://github.com/linrui1994/mpvue-ripple)