【Vue源碼相關】用Vue.extend()來作一個全局提示組件

全局方法

用vuejs構建單頁應用時都會用到一些全局方法，好比發ajax請求時喜歡用axios掛載到vue原型上，以下：

// 1 引入vue和axios
import Vue from 'vue'
import axios from 'axios'
// 2 對axios的一些封裝
// code ...

// 3 而後掛載到原型上
Vue.prototype.$axios = axios

用的時候就直接上this.$axios：

// 用axios.get()方法能夠這樣用
this.$axios.get()

這樣確實方便，不用每一個用到axios的組件都去引入。

全局組件

相似如此，當咱們要用到一些操做dom的方法時要怎麼作呢，上面的例子純屬js的封裝，沒有涉及到dom；下面我用一個全局提示組件爲例，相似element-ui的message組件爲你們演示一遍如何封裝一個包含操做dom的的全局組件的，步驟主要有3步：

1, 在componenets/Message 目錄下新建一個Message.vue組件

<template>
<transition name="fade">
    <div class="message" :class="type" v-show="show">
      <i class="icon"></i>
      <span class="text">{{text}}</span>
    </div>
</transition>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'message',
    props: {
      type: {
        type: String,
        default: 'info',
        validator: val => ['info', 'success', 'warning', 'error'].includes(val)
//['info', 'success', 'warning', 'error'] 表示type只接收這四個字符串做爲參數傳入message組件
      },
      text: {
        type: String,
        default: ''
      },
      show: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~@/common/style/global.styl"
   // fade動畫 <transition name="fade"> </transition>
   // 下面的樣式能夠本身改
  .fade-enter-active,
  .fade-leave-active 
     transition: opacity .3s
  .fade-enter,
  .fade-leave-to
     opacity: 0
  .message
    position fixed
    top 40px
    text-align center
    left 50%
    transform translateX(-50%)
    min-width 400px
    padding 10px 20px
    color $strong-text-color
    background #f5f5f5
    font-size 14px
    line-height 1.4
    border-radius 4px
    z-index 1000
    box-shadow 0 0 10px rgba(0, 0, 0, .3)
    &.info
      color $strong-text-color
    &.success
      color $success-color
    &.error
      color $danger-color
    &.warning
      color $warning-color
</style>

2, 在componenets/Message目錄準備一個index.js

import Message from './Message.vue'

const MESSAGE = {
  duration: 3000, // 顯示的時間 ms
  animateTime: 300, // 動畫時間,表示這個組件切換show的動畫時間
  install(Vue) {
    if (typeof window !== 'undefined' && window.Vue) {
      Vue = window.Vue
    }
    Vue.component('Message', Message)

    function msg(type, text, callBack) {
      let msg
      let duration = MESSAGE.duration
      if (typeof text === 'string') {
        msg = text
      } else if (text instanceof Object) {
        msg = text.text || ''
        if (text.duration) {
          duration = text.duration
        }
      }
      let VueMessage = Vue.extend({
        render(h) {
          let props = {
            type,
            text: msg,
            show: this.show
          }
          return h('message', {props})
        },
        data() {
          return {
            show: false
          }
        }
      })
      let newMessage = new VueMessage()
      let vm = newMessage.$mount()
      let el = vm.$el
      document.body.appendChild(el) // 把生成的提示的dom插入body中
      vm.show = true
      let t1 = setTimeout(() => {
        clearTimeout(t1)
        vm.show = false  //隱藏提示組件，此時會有300ms的動畫效果，等動畫效果過了再從body中移除dom
        let t2 = setTimeout(() => {
          clearTimeout(t2)
          document.body.removeChild(el) //從body中移除dom
          newMessage.$destroy()
          vm = null // 設置爲null，好讓js垃圾回收算法回收，釋放內存

          callBack && (typeof callBack === 'function') && callBack() 
      // 若是有回調函數就執行，沒有就不執行，用&&操做符，
      // 只有&&左邊 的代碼爲true才執行&&右邊的代碼，避免用麪條代碼：
      // if(true){
      //   ... 
      //   if(true){
      //   ...
      //   }
      // }
        }, MESSAGE.animateTime)
      }, duration)
    }

// 掛載到vue原型上，暴露四個方法
    Vue.prototype.$message = {
      info(text, callBack) {
        if (!text) return
        msg('info', text, callBack)
      },
      success(text, callBack) {
        if (!text) return
        msg('success', text, callBack)
      },
      error(text, callBack) {
        if (!text) return
        msg('error', text, callBack)
      },
      warning(text, callBack) {
        if (!text) return
        msg('warning', text, callBack)
      }
    }
  }
}
export default MESSAGE

上面的代碼關鍵點就是用Vue.extend()構造出一個Vue子類實例，( 注意我這裏模板渲染只用到render函數，沒有用template選項，由於template選項 要求裝Vue時要加入模板編譯器那塊代碼,用render函數更加簡潔，只須要裝運行時版本，Vue體積更加小)；而後調用$mount()方法生成須要的dom,再拿到對應的$el,實例內部本身維護插入dom和移除dom的操做，對外暴露了四個方法info、success、error、warning方便不一樣的場景調用；相似的組件還有confrim組件、alert組件等，大同小異。

3，在main.js中引入components/Message/index.js,以插件形式安裝

import Vue from 'vue'
import vMessage from './components/Message/index' 
Vue.use(vMessage)

最後，當你須要用的時候就直接，特別適合在ajax回調函數裏面用來提示

this.$message.info('普通消息') 
this.$message.error('錯誤消息') 
this.$message.warning('警告消息') 
this.$message.success('成功消息')

 轉自：https://www.jianshu.com/p/b931abe383e3