nw-vue-toast

English

又一个vue的提示插件

如何使用

使用包管理下载安装

$ npm install --S nw-vue-toast

使用模块管理引用

import ToastPlugin from 'nw-vue-toast'
Vue.use(ToastPlugin[, options]) // options here will apply to all toasts

在组件中使用

this.$toast('Test-Toast'[, options]}) // options here will apply to only this toast

可用的选项

名称	描述	类型	默认值
position	提示框的位置[1]	String	'bottom center'
content	提示的内容，可以使用HTML	String	'toast'
time	提示的持续时间，单位：毫秒（ms）	Integer	3000
showAnimation	提示出现时的动画效果[2]	String	'fade-in'
removeAnimation	提示消失时的动画效果[3]	String	'fade-out'
customCss	用户自定义的css[4], 形式为JavaScript对象	Object	null
customClass	将会赋予提示栏的class[5]	String	""
afterRemoved	在提示消失后进行回调	Function	null

[1] 内置的位置包括['top', 'bottom', 'middle']之一加上['left', 'center', 'right']之一, 例如. 'top center'. 也可以传入空字符串然后在customCss中进行具体设置。
[2][3] 内置的进入动画包括['fade-in', 'fly-in-left', 'fly-in-right', 'fly-in-top', 'fly-in-bottom']; 内置的离场动画包括['fade-out', 'fly-out-left', 'fly-out-right', 'fly-out-top', 'fly-out-bottom']
[4] 例如 {'background-color': 'black', 'color': 'white'}
[5] 例如 "toast-class1 toast-class2"

方法

toast = this.$toast('Test-Toast')
toast.shake(n)  //提示框将会在一秒内抖动n次，默认值为40
toast.cancelTimeout() //取消自动的消失计时
toast.setNewTime(n) //新建消失计时，单位为毫秒（ms）
toast.remove() //提示会立刻以创建时选择的离场方式关闭
toast.setContent(str) //改变提示的内容

运行demo

# 安装依赖
$ npm install

# 运行demo
$ npm start
// visit localhost:8080 to see demo