手把手教你写一个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，」 并传入一个字端，至此，大功告成。看看效果

到此这篇关于手把手教你写一个vue全局注册的Toast的实现的文章就介绍到这了,更多相关vue全局注册Toast内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论