前言：

前幾天客戶經(jīng)理不讓我用某餓了么之類的UI庫做一個(gè)輕提示之類的組件，當(dāng)時(shí)一想我是餓了么戰(zhàn)士，怎么會寫哪個(gè)東西，然后我就想著用個(gè)alert糊弄過去，但是不行，然后我就細(xì)琢磨，發(fā)現(xiàn)Vue有個(gè)非常不錯(cuò)的Vue.extend。

經(jīng)過一番努力，我學(xué)會了，可能是以前學(xué)的時(shí)候馬虎漏掉了。不過問題不大，還能肝。

我們先思考下面的問題：

在寫vue項(xiàng)目的時(shí)候啊，我們有了初始化的根實(shí)例之后，頁面之間都是通過router進(jìn)行管理，組件也是通過import進(jìn)行局部注冊，但是如果我要是想從接口動態(tài)渲染組件怎么辦？想實(shí)現(xiàn)一個(gè)類似于 window.alert() 提示組件就像是調(diào)用 JS 函數(shù)一樣調(diào)用它？

提前寫好？

哪有那么多提前，有這個(gè)力氣還不如想一想今晚去哪干飯？

回到正題哈

首先：

我先提前準(zhǔn)備好一個(gè)干凈的vue2.x的項(xiàng)目，然后我寫好一個(gè)組件，叫什么名字好呢？就叫Toast，妥妥的輕提示

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

看到這里那就可能有些鐵子問，為什么要放一個(gè)v-if上去？還有哪個(gè)msg是什么東西，還有哪個(gè)類名什么什么的，我們先把這些問題放一下，后面會解答

既然想要調(diào)用JS函數(shù)一樣愉快使用，那我們就這么愉快的決定了。

然后：

我在我的utils.js文件中寫下面的代碼

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


// 生成構(gòu)造函數(shù)
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生成一個(gè)構(gòu)造函數(shù)--->「const ToastConstructor = vue.extend(Toast)」

然后再進(jìn)行二次封裝，搞一個(gè)**「showToast函數(shù)」，傳入兩個(gè)參數(shù)，一個(gè)是「內(nèi)容txt」，一個(gè)是「時(shí)間onTime」，輕提示嗎，肯定一下子又消失了，那個(gè)內(nèi)容就是模板「msg」**里要傳入的內(nèi)容，

后來:

我們new一個(gè)**「newDom，」** 它接收的是一個(gè)對象，就是把下面的東西裝起來，然后el是創(chuàng)生成一個(gè)**「dom」**

然后下面data返回**「msg」就是模板哪里的那個(gè)東西知道了吧，然后將傳進(jìn)來的「txt」給他安上，那個(gè)isShow也是就是模板上面的「v-if」**的，因?yàn)橐獎?chuàng)建一個(gè)元素，肯定這個(gè)好使，現(xiàn)在差不多完成啦，鐵子們再堅(jiān)持一下

然后我們再進(jìn)行掛載，怎么掛載呢？用**「document.body.appendChild(newDom.$el)」**

為什么呢？

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

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

然后就到了掛載到Vue原型上了，然后就是導(dǎo)出啦，不導(dǎo)出別人不知道你搞了什么出來。

再且：

在main入口文件引入這個(gè)utils.js，然后全局使用

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

然后在隨便一個(gè)頁面使用，我這里是在App.vue中

<template>
  <div id="app">
    <button @click="addDom">動態(tài)添加組件</button>
  </div>
</template>

<script>
export default {

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

<style lang="less">

</style>

這里我用一個(gè)按鈕然后配合一個(gè)點(diǎn)擊事件，讓他使用這個(gè) 「$toast，」 并傳入一個(gè)字端，至此，大功告成。看看效果

到此這篇關(guān)于手把手教你寫一個(gè)vue全局注冊的Toast的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue全局注冊Toast內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論