[英]How to create a npm package with multiple vue directives? Or should I create one package per directive?
我可以通過在 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)
}
})
您正在嘗試導出兩個默認值。 默認值意味着您只需說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';
查看Vue 指南:編寫一個插件,我們可以按照本指南開發指令,然后允許用戶通過 2nd parameters= options
激活特定指令。
就像下面的演示(假設 export 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, 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.