如何製做一個相似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的靈活寫法。這都取決於您。