手把手教你写一个vue全局注册的Toast的实现

前言：

前几天客户经理不让我用某饿了么之类的UI库做一个轻提示之类的组件，当时一想我是饿了么战士，怎么会写哪个东西，然后我就想着用个alert糊弄过去，但是不行，然后我就细琢磨，发现Vue有个非常不错的Vue.extend。

经过一番努力，我学会了，可能是以前学的时候马虎漏掉了。不过问题不大，还能肝。

我们先思考下面的问题：

在写vue项目的时候啊，我们有了初始化的根实例之后，页面之间都是通过router进行管理，组件也是通过import进行局部注册，但是如果我要是想从接口动态渲染组件怎么办？想实现一个类似于 window.alert() 提示组件就像是调用 JS 函数一样调用它？

提前写好？

哪有那么多提前，有这个力气还不如想一想今晚去哪干饭？

回到正题哈

首先：

我先提前准备好一个干净的vue2.x的项目，然后我写好一个组件，叫什么名字好呢？就叫Toast，妥妥的轻提示

<template>
    <div class="box" v-if="isShow">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
export default {
    name:'Toast'
}
</script>
<style lang="">
    
</style>

看到这里那就可能有些铁子问，为什么要放一个v-if上去？还有哪个msg是什么东西，还有哪个类名什么什么的，我们先把这些问题放一下，后面会解答

既然想要调用JS函数一样愉快使用，那我们就这么愉快的决定了。

然后：

我在我的utils.js文件中写下面的代码

import vue from 'vue'
import Toast from '../views/Toast.vue'


// 生成构造函数
const ToastConstructor = vue.extend(Toast)

function showToast(txt, onTime = 2000) {
    let newDom = new ToastConstructor({
        el: document.createElement('div'),
        data() {
            return {
                msg: txt,
                isShow: true
            }
        }
    });
    document.body.appendChild(newDom.$el)
    setTimeout(() => { newDom.isShow = false }, onTime)
}
//全局组件，挂载到vue原型上
function regFn() {
    vue.prototype.$toast = showToast
}

export default regFn

首先我们引入vue和Toast组件，毕竟我们需要用到vue的extend，肯定带它一起玩，不带它闹脾。

然后我用Vue.extend生成一个构造函数--->「const ToastConstructor = vue.extend(Toast)」

然后再进行二次封装，搞一个**「showToast函数」，传入两个参数，一个是「内容txt」，一个是「时间onTime」，轻提示吗，肯定一下子又消失了，那个内容就是模板「msg」**里要传入的内容，

后来:

我们new一个**「newDom，」** 它接收的是一个对象，就是把下面的东西装起来，然后el是创生成一个**「dom」**

然后下面data返回**「msg」就是模板哪里的那个东西知道了吧，然后将传进来的「txt」给他安上，那个isShow也是就是模板上面的「v-if」**的，因为要创建一个元素，肯定这个好使，现在差不多完成啦，铁子们再坚持一下

然后我们再进行挂载，怎么挂载呢？用**「document.body.appendChild(newDom.$el)」**

为什么呢？

「document.body.appendChild()」 是将指定的**「ewDom」**的 **「$el」加到「document.body」**的末尾

然后我们轻提示完了是不是要消失，所以就用**「setTimeout(() => { newDom.isShow = false }, onTime)」** 将它两秒后消失，

然后就到了挂载到Vue原型上了，然后就是导出啦，不导出别人不知道你搞了什么出来。

再且：

在main入口文件引入这个utils.js，然后全局使用

//引入
import ToastDom from './util/utils'
// 全局注册使用
Vue.use(ToastDom)

然后在随便一个页面使用，我这里是在App.vue中

<template>
  <div id="app">
    <button @click="addDom">动态添加组件</button>
  </div>
</template>

<script>
export default {

  methods: {
    addDom(){
      this.$toast('你瞧瞧我做的轻提示')
    }
  },
};
</script>

<style lang="less">

</style>

这里我用一个按钮然后配合一个点击事件，让他使用这个 「$toast，」 并传入一个字端，至此，大功告成。看看效果