如何创建具有多个 vue 指令的 npm 包？或者我应该为每个指令创建一个包？

Question

我可以通过在 src/index.js 文件中导出单个 vue 指令来创建 npm 包。但是我怎样才能创建一个让你使用多个 vue 指令的包。我无法在同一个 index.js 文件中导出两个 vue 指令。export default Vue.directive('directive1', {  inserted: function (el, binding, vnode) {    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))    setDraggerOffset(el, _data)  }})export default Vue.directive('directive2', {  inserted: function (el, binding, vnode) {    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))    setDraggerOffset(el, _data)  }})

Answer 1

您正在尝试导出两个默认值。默认值意味着您只需说即可获得该值import MyPack from 'path/to/package'。您需要导出常量，并在导入的位置进行解构。

包装内

export const vD1 = Vue.directive('directive1', {
  ...
})export const vD2 = Vue.directive('directive2', {
  ...
})

无论您在哪里进口：

import { vD1, vD2 } from 'path/to/package';

Answer 2

查看Vue 指南：编写一个插件，我们可以按照该指南开发我们的指令，然后允许用户通过第二个参数=激活特定指令options。

就像下面的演示（假设 export myDirectives，并且只 enable directive1）：

let myDirectives = {}

let _defaultDirectives = ['directive1', 'directive2']

myDirectives.directive1 = {

  inserted: function (el, binding, vnode) {

    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))

    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))

    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))

    console.log('directive1', `setDraggerOffset(el, _data)`)

  }

}

myDirectives.directive2 = {

  inserted: function (el, binding, vnode) {

    el.addEventListener('mouseup', (e) => mouseup(e, el, _data))

    el.addEventListener('mousedown', (e) => mousedown(e, el, _data))

    el.addEventListener('mousemove', (e) => mousemove(e, el, _data))

    console.log('directive2', `setDraggerOffset(el, _data)`)

  }

}

myDirectives.install = function (Vue, options) {

  let selectedDirectives = (options && options.directives) || _defaultDirectives

  selectedDirectives.forEach((directive) => 

    Vue.directive(directive, this[directive])

    // this[directive + 'Definition'] = Vue.directive(directive, this[directive])

  )

}

// export default myDirectives

// Vue.use(myDirectives) // default option is register both directive1 and directive 2

Vue.use(myDirectives, {directives: ['directive1'] }) // register directive1 only

// console.log('Definition', myDirectives.directive1Definition, myDirectives.directive2Definition)

new Vue({

  el: '#app'

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <span v-directive1></span>

  <span v-directive2></span>

</div>