vue中編寫通過方法調用的組件

我們經常會看到this.$toast(‘消息提示’) 這樣的用法
通過函數調用的組件，常見的toast提示框，loading等。

創建文件

目錄結構

|---loading
   	|---Loading.vue
   	|---index.js

編寫index.js

思路

• 創建組件構造器
• 實例化組件掛載到一個新建的div上
• 新增至body頁面上
• 通過實例對組件進行代理操作

import Vue from 'vue'
import LoadingComponent from './Loading.vue'

class Loading {
    constructor() {
        this.init()
    }

    initInstance() {
        // 創建構造器
        const loadingConstructor = Vue.extend(LoadingComponent)

        this.instance = new loadingConstructor({
            el: document.createElement('div')
        })

        document.body.appendChild(this.instance.$el)
    }

    init(options = {}) {
        if (this.instance) {
            return
        }
        // 初始化
        this.initInstance()
    }

    start(options = {}) {
        // 將單個 confirm instance 的配置合併到默認值（instance.$data，就是main.vue裏面的data）中
        Object.assign(this.instance.$data, options)
        // 顯示
        this.instance.start()
    }

    stop(options = {}) {
        // 將單個 confirm instance 的配置合併到默認值（instance.$data，就是main.vue裏面的data）中
        Object.assign(this.instance.$data, options)
        // 顯示
        this.instance.stop()
    }
}

export default Loading

使用

• 可做成插件

  // loading/index.js
  const install = function (Vue) {
      //添加全局API
      Vue.prototype.$loading= new Loading()
  }
  export default { install }
  // app.js
  import Vue from 'vue';
  import Loading from 'components/loading';
  Vue.use(Loading)
  

• 直接綁定到vue實例上

  Vue.prototype.$loading = new Loading()
  

• 調用

  this.$loading.start() // 顯示加載中
  this.$loading.stop() // 停止顯示