本篇內(nèi)容介紹了“怎么用Vue封裝全局toast組件”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)是一家專業(yè)從事成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

一. 借助 vue-cli

1. 定義 Toast 組件

// components/Toast






div {
  position: fixed;
  top: 30%;
  left: 50%;
  padding: 5px 20px;
  color: #fff;
  background-color: #424242;
  border-radius: 5px;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* vue動(dòng)畫過(guò)渡效果設(shè)置 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

2. 在 main.js 里面配置

import Vue from "vue"
import App from "./App.vue"
import Toast from "./components/Toast"

// 定義插件對(duì)象
const ToastObj = {
  install: function (Vue) {
    // 創(chuàng)建一個(gè)Vue的“子類”組件
    const ToastConstructor = Vue.extend(Toast)
    // 創(chuàng)建一個(gè)該子類的實(shí)例,并掛載到一個(gè)元素上
    const instance = new ToastConstructor()
    console.log(instance)
    // 將這個(gè)實(shí)例掛載到動(dòng)態(tài)創(chuàng)建的元素上,并將元素添加到全局結(jié)構(gòu)中
    instance.$mount(document.createElement("div"))
    document.body.appendChild(instance.$el)

    // 在Vue的原型鏈上注冊(cè)方法，控制組件
    Vue.prototype.$toast = (msg, duration = 1500) => {
      instance.message = msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
      }, duration)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount("#app")

3. 在其他組件內(nèi)使用

二、不借助 vue-cli

 在借助 vue-cli 的情況下，可以方便實(shí)現(xiàn)組件的導(dǎo)入導(dǎo)出，但是在不借助構(gòu)建工具的情況下，就需要使用其他方法了

1. 注冊(cè) toast 組件