如何解决如何使用多个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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。