问题背景:
相关版本:
vue2.7.14
vuescroll 4.17.6
vuescroll import引入, vue.use方式plugin
vue import 引入时,vuescroll正常使用, 改cdn引入后, Vue.use安装vuescroll插件无效,组件无法使用, 但Vue.component方法注册全局组件仍然可行 (但无法直接进行配置项设置)
问题原因:
库源码设置了 在检测到window.Vue存在的时候 会自动进行Vue.use注册插件,
而Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。
所以导致后续自己使用Vue.use的时候 注册失效
问题产生部分源码如下
// 以下片段截取自vuescroll.js 源码
//...
function install(Vue$$1) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
console.log(opts)
Vue$$1.component(opts.name || component.name, component);
Vue$$1.prototype.$vuescrollConfig = opts.ops || {};
}
var Vuescroll = _extends({
install: install,
version: '4.17.6',
refreshAll: refreshAll,
scrollTo: scrollTo
}, component);
// 关键问题所在
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(Vuescroll);
}
return Vuescroll;
解决方式:
在库安装的时候 外层包装一层install 变成自定义插件
内部直接调用vuescroll.install, 使用源码内部 Vue.component的方式进行全局组件注册 解决前述的问题
Vue.use({
install (vue) {
vuescroll.install(vue, {
ops: {
//添加配置
},
name: 'Scroll' // 自定义组件名称, 默认是vueScroll
})
}
})