0.4.4 • Published 3 years ago
nw-vue-toast v0.4.4
nw-vue-toast
又一个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 | 用户自定义的css4, 形式为JavaScript对象 | Object | null |
| customClass | 将会赋予提示栏的class5 | String | "" |
| afterRemoved | 在提示消失后进行回调 | Function | null |
1 内置的位置包括'top', 'bottom', 'middle'之一加上'left', 'center', 'right'之一, 例如. 'top center'. 也可以传入空字符串然后在customCss中进行具体设置。 2 内置的进入动画包括'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