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	加载显示块的背景色

期望

1. 加入不同加载动画
2. ...