elemefe / vue-toast-mobile

A mobile toast plugin for vue.js

Overview

vue-toast-mobile is a mobile toast plugin for vue.js.

Installation

First, install vue-toast-mobile from npm:

$ npm install vue-toast-mobile

Then use it:

// ES6 mudule
import Toast from 'vue-toast-mobile';

// CommonJS
const Toast = require('vue-toast-mobile').default;

Usage

Basically you can pass a string to Toast:

Toast('Upload Completed');

Or invoke Toast with an object as its configuration:

Toast({
  message: 'Upload Completed',
  position: 'bottom',
  duration: 5000
});

API

Option	Description	Value	Default
message	content of the toast
position	location of the toast relative to viewport	'top' 'bottom' 'middle'	'middle'
duration	time before the toast vanishes, in millisecond		3000
className	custom class name of the toast
iconClass	class name of the optional icon font

License

MIT

vue-toast-mobile's Issues

使用时浏览器报错？

VUE版本2.3.3

import Toast from 'vue-toast-mobile';
....
mounted() {
 Toast('this is toast');
}

not support in vue2.0

In vue2.0, will throw warning below

 [Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in root instance)

'lib/index.js' error

当我运行 cooking build -p命令生成 lib/index.js和lib/index.css文件，我运行example中的index.html并把dist/index.js改为 lib/index.js时报错：Uncaught TypeError: Cannot read property 'extend' of undefined 好像是Vue的extend方法，实在是找不到原因，都没有引入example/index.js

There`s no dependencies in package.json

I download the source but can`t build it,could you add dependencies to package.json?

这段代码疑问

let removeDom = event => {
if (event.target.parentNode) {
event.target.parentNode.removeChild(event.target);
}
};
冒昧的问一句，在移除event.target之前，是不是应该把它上面注册的事件监听器(事件transitioned)先移除掉？

关于引入之后运行报错的处理

将src下的源码复制到项目，然后修改index.js中的引入toast.vue文件的方式为import可以解决 ☺️

vue2.1.0 issue

vue version:2.1.0
vue-toast-mobile version 2.0.0

  import Toast from 'vue-toast-mobile'
...
            Toast('xxxxx!');

error:

[Vue warn]: Error when rendering root instance: 
warn @ vue.common.js?e881:521
Vue._render @ vue.common.js?e881:2223
updateComponent @ vue.common.js?e881:2609
get @ vue.common.js?e881:2934
Watcher @ vue.common.js?e881:2926
Vue._mount @ vue.common.js?e881:2608
Vue$3.$mount @ vue.common.js?e881:6178
Vue$3.$mount @ vue.common.js?e881:8549
Vue._init @ vue.common.js?e881:3381
VueComponent @ vue.common.js?e881:3500
u @ index.js?ac12:1
d @ index.js?ac12:1
confirm @ Register.vue?7af6:56
boundFn @ vue.common.js?e881:126
click @ Register.vue?17d3:201
invoker @ vue.common.js?e881:1944
vue.common.js?e881:2225 Uncaught ReferenceError: _h is not defined
    at Proxy.render (eval at <anonymous> (app.js:3699), <anonymous>:1:2073)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:736), <anonymous>:2216:22)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:736), <anonymous>:2609:21)
    at Watcher.get (eval at <anonymous> (app.js:736), <anonymous>:2934:27)
    at new Watcher (eval at <anonymous> (app.js:736), <anonymous>:2926:12)
    at VueComponent.Vue._mount (eval at <anonymous> (app.js:736), <anonymous>:2608:19)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:736), <anonymous>:6178:15)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:736), <anonymous>:8549:16)
    at VueComponent.Vue._init (eval at <anonymous> (app.js:736), <anonymous>:3381:10)
    at new VueComponent (eval at <anonymous> (app.js:736), <anonymous>:3500:12)

Styles are not imported

按照指引，import Toast from 'vue-toast-mobile';之后，样式并没有引入进来。还是我的姿势不对？

这个库不维护了吗

已经一年多没有更新了