如何使用多个vue指令创建npm包？还是应该为每个指令创建一个包？

问题描述

我能够通过在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,_data))
    el.addEventListener('mousemove',(e) => mousemove(e,_data))
    setDraggerOffset(el,_data)
  }
})

export default Vue.directive('directive2',_data)
  }
})

解决方法

您正在尝试导出两个默认值。默认值表示您只需说import MyPack from 'path/to/package'就可以获取值。您需要导出常量，并在要导入的位置进行销毁。 Learn more here

在包裹中

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

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

您要导入的位置：

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

,

选中Vue Guide: Writing one plugin，我们可以按照本指南来开发指令，然后允许用户通过第二个参数= options激活特定的指令。

就像下面的演示（假设导出myDirectives，并且仅启用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,_data))
    el.addEventListener('mousemove',(e) => mousemove(e,_data))
    console.log('directive1',`setDraggerOffset(el,_data)`)
  }
}

myDirectives.directive2 = {
  inserted: function (el,_data))
    console.log('directive2',_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>