vuescroll库在vue2 使用cdn引入情况下vue.use不生效问题

228 阅读1分钟

repo传送门

问题背景:

相关版本:
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
    })
  }
})