如何制作一个类似jquery插件的vue插件

vue拿来写插件，会不会太那啥？

请跟我念，“不会，符合业务需求才是你的老板最想要的。”

如何封装一个可以全局调用的vue插件

其原理其实相当简单，通过new Vue(vueComponentConstructor)您可以轻松的建立一个vue实例，在该实例上您可以操作方法、操作数据、监听数据变化，使用各种钩子，对开发者而言并没有任何阻碍。

我们生产了一个实例后该如何操作

请跟我来,写一个实现。首先，我们先写一个vue组件。

// vue组件 A.vue
<template>
  <el-dialog title="选择文件夹" :visible.sync="visible" @close="close">
    <div class="dirtree">
      <el-tree
        :props="dirtree"
        :load="loadDir"
        :render-content="refresh"
        :expand-on-click-node="false"
        @node-click="selectDir"
        lazy
      >
      </el-tree>
    </div>
    <el-button type="success" @click="ensureSelectedDir">确定</el-button>
    <el-button @click="cancelSelectedDir">取消</el-button>
  </el-dialog>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      dirtree: {
        label: function (data, node) {
          return data.name
        },
        data: null,
        isLeaf: true
      },
      visible: false,
      selectedDir: ''
    }
  },
  methods: {
    close () {
        this.$nextTick(() => {
          // 关闭时销毁元素
          this.$destroy(true)
          this.$el.parentNode.removeChild(this.$el)
        })
    },
    ensureSelectedDir () {
    },

    cancelSelectedDir () {
    },

    selectDir (data) {
    },

    refreshDirData ($event, ctx) {
    },

    loadDir (node, resolve) {
    },

    refresh (h, ctx) {
    }
  }
}
</script>

当然，如果您的构建系统不支持vue-loader和webpack,您也可以使用以下写法

export default const Dialog = {
    name: 'xxx',
    template: `
        <div>
            // some template
        </div>
    `,
    data () {
        return {}
    },
    methods: {}
}

第二步，生产api出口

// 生成调用方法
import Vue from 'vue'
import A from './A.vue'

let AConstructor = Vue.extend(A)

export default function (options = {}) {
  let instance = new AConstructor({
    data: options // 混入初始化数据，也可以直接通过merge的方式把数据插入实例对象上
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true // 一些生成后的data成员操作
  return instance.vm
}

您可以将其生成单一实例，也可以每次调用生成不同实例，在关闭时调用$destroy配合destroyed或者beforeDestroy对存在页面上的vm.$el进行销毁。

一些提示

您可以将实例引用挂载到任何您想挂载的地方方便调用，您也可以使用Promise配合vue实例里的自定义方法或者其他方法实现promise链或者async await的灵活写法。这都取决于您。

原文地址：https://segmentfault.com/a/1190000014150243