0.0.2 • Published 6 years ago
happy-vue-toast v0.0.2
happy-vue-toast
一款基于vue2的toast插件
安装
// 安装
npm install happy-vue-toast
// 引入注册
import toast from 'happy-vue-toast'
Vue.use(toast)
// 全局注册时可以加入配置项
Vue.use(toast,{
type:'bottom'
//....
})
你也下载 dist中的happy-vue-toast.js文件,直接引入使用
// 注意前提是引入了vue文件
<script src="./dist/happy-vue-toast.js"></script>
基本使用
toast 显示的位置有 top
,center
,bottom
三种
// 默认在页面中间显示
this.$toast('hello world')
// 修改为在top显示
this.$toast('hello world','top')
// or
this.$toast.top('hello world')
this.$toast.center('hello world')
this.$toast.bottom('hello world')
// 局部调用加入配置项,此配置项会覆盖全局配置项
this.$toast.top('hello world',{
duration:3000, // 持续时间
extStyle:{ // 修改样式
color:'red',
background: '#eeeeee'
}
})
使用loading功能
// 不加配置使用默认样式
this.$showLoading()
// 可自行配置所需样式
this.$showLoading({
donutColor:'red' // 加载动画环的颜色
//...
})
// 关闭加载
this.$hideLoading()
配置项
toast的配置项
名称 | 类型 | 作用 |
---|---|---|
type | string | 控制显示位置 |
duration | number | 显示持续时间 |
extStyle | object | 修改样式(不建议修改很多) |
loading的配置项
名称 | 类型 | 作用 |
---|---|---|
loadText | string | 显示字样 |
showMask | boolean | 是否显示遮罩层 |
maskColor | string | 遮罩层颜色 |
donutColor | string | 加载动画环的颜色 |
loadBgColor | string | 加载显示块的背景色 |
期望
- 加入不同加载动画
- ...