Vue封装Toast消息提示

Vue 封装Toast消息提示

学习Vue的道路上,封装一些自定义的组件不可避免，今天就来封装一个Toast消息提示。后面还有dialog对话框，原理差不多。

首先先看看效果图

现在才知道用qq录制gif图是真方便。(非广告,后面会多用gif图)

1 正常组件调用

2 全局注册对象调用(不知道是不是叫这个名字)

一 首先，我们先封装一个正常组件看看效果。

• 1 首先创建一个最普通的组件/toast/Toast.vue 看看效果.

• 2 调用看看效果

然后就能看到这样的效果，但是样式不够好看。

• 3 稍微美化一下

我颜色搭配也没什么经验，就参考的ElementUI。

添加了type样式， 还有提示的小图标，共四种，需要自行去阿里矢量图下载。

• 4 再看看美化后的效果, 有四种类型，就只看success类型的。

对应完整代码Github地址 https://github.com/CoderCharm/Mall/blob/master/src/components/common/toast/Toast.vue

组件调用总结

调用非常不方便，使用需要导入，传入参数，回调之类的，不符合使用习惯，像ElementUI那种，使用起来就特别方便。
下一步就是超那个方向封装。

二 组件封装全局注册

• 1 这次重新创建一个/toast/CustToast.vue组件，里面就不怎么写逻辑.

• 2 然后在同级目录创建/toast/index.js文件组册，给Vue添加原型$toast

//
import vue from 'vue'

// 导入自定义到Toast组件
import CustToast from './CustToast.vue'


// 生成一个扩展实例构造器
const ToastConstructor = vue.extend(CustToast);

// 定义弹出组件的函数 接收三个参数 消息 toast类型 显示时间
function showToast(message, type="normal", duration = 2000) {

    // 实例化一个 CustToast.vue
    const _toast = new ToastConstructor({
        data() {
            return {
                showToast: true,
                type: type,
                message: message,
                duration: duration
            }
        }
    });

    // 把实例化的 CustToast.vue 添加到 body 里
    let element = _toast.$mount().$el;
    document.body.appendChild(element);

    // duration时间到了后隐藏
    setTimeout(() => {_toast.showToast = false} ,duration)
}

// 需要在main.js 里面使用 Vue.use(showToast);
showToast.install = (Vue) => {
    // 将组件注册到 vue 的 原型链里去,
    // 这样就可以在所有 vue 的实例里面使用 this.$toast()
    Vue.prototype.$toast = showToast
};

// 导出
export default showToast

• 3 vue-cli main.js文件注册

import showToast from '@/你的路径/toast/index'

Vue.use(showToast);

• 4 使用

// 封装的时候, 定义了三个参数，message必须要传
// message, type="normal", duration = 2000

this.$toast("测试普通")
this.$toast("测试成功", "success", 5000)
this.$toast("测试警告", "warning")
this.$toast("测试失败", "fail")

就可以看到开头，我那个演示的gif了。

当然呢，消息提示显示的位置，我没自定义统一显示在中间，同样是按照type一样的思路,给个class样式就可以了。
还有就消失的动画没处理，多个消息弹出的时候直接折叠了。

第二个封装样式Github地址: https://github.com/CoderCharm/Mall/blob/master/src/components/common/toast/CustToast.vue

封装总结

我是第一次封装自己的全局对象，Vue原型挂载, vue.extend的用法。官网Vue.extend说明https://cn.vuejs.org/v2/api/index.html#Vue-extend

感觉还行的话，就去我那个项目点个star吧