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() // 停止显示