Rangy 库的 Vue 错误：“...”不是函数（但仅限于钩子内部）

Posted 2023-02-23

【中文标题】Rangy 库的 Vue 错误：“...”不是函数（但仅限于钩子内部）

【英文标题】：Vue error with Rangy library: "..." is not a function (but only inside hooks)

【发布时间】：2019-09-24 04:10:41

【问题描述】：

对于 Vue 组件，我使用 Rangy library 突出显示文本中的单个单词。如果从 methods 对象内的任何方法调用 Rangy，这将正常工作：

let applier = rangy.createClassApplier('some-class');
applier.toggleRange(range);

但有时我需要在页面加载时恢复某个状态，所以我尝试在 created 和 mounted 挂钩中使用相同的方法。这不起作用。

现在，我的组件中脚本的第一行如下所示：

import _ from 'lodash';
import rangy from 'rangy';
import 'rangy/lib/rangy-classapplier';

export default 

    mounted: function() 
        // Leave function if there is no data in DB to be restored
        if (_.isEmpty(this.mostRecentAnswers))
            return;

        else 
            // ERROR
            let applier = rangy.createClassApplier('some-class');
            // ...
        
    
    // ...

错误信息是TypeError: rangy__WEBPACK_IMPORTED_MODULE_2___default.a.createClassApplier is not a function at VueComponent.mounted

我将 Vue 与 Laravel 和 Laravel Mix（它是 Webpack 的包装器）一起使用。

我的代码有什么问题？注意我还导入 Lodash 并在钩子中使用它，没有任何错误。

【参考方案1】：

我建议用它制作一个 Vue 插件以使其更容易：

// plugins/vue-rangy.js

import rangy from 'rangy'

const VueRangy = 
  install (Vue, options) 
      if (options.hasOwnProperty('init') && options.init) 
        rangy.init()
      

      Vue.prototype.$rangy = rangy
  


export default VueRangy

然后像使用任何其他插件一样使用它：

import VueRangy from 'plugins/vue-rangy'

Vue.use(VueRangy, 
  init: true
)

然后在你的组件中使用this.$rangy。

【讨论】：

谢谢！事实上，我之前做过类似的事情（并且仍然对其他库这样做），但由于某种原因，我不记得停止对 Rangy 这样做了。此外，还有一个更简单（或至少不太复杂）的解决方案，请参阅我自己的答案。

【参考方案2】：

我必须使用rangy.init() 来初始化 Rangy，如果它还没有被初始化的话： https://github.com/timdown/rangy/wiki/Rangy-Object#rangyinit

【讨论】：

你让 createHighlighter() 工作了吗？但是 createClassApplier() 正在工作。顺便说一句，我将 rangy 作为插件加载。