0

我在 VueJS 3 中工作，刚刚添加了 TipTap 编辑器。我只想在用户单击内容时显示编辑器菜单，触发焦点事件。然后在模糊菜单需要隐藏。所以我在菜单组件中添加了一个 ref="myMenu" 并使用 opFocus nad onBlur 事件处理程序初始化编辑器。

问题，“this”指的是编辑器的范围，而不是知道 $refs 的“this”。问题，我如何传入全局属性？

我的模板

        <div v-if="editor">
            <menu-bar class="editor__header" :editor="editor" ref="editMenu" />
            <editor-content :editor="editor" />
        </div>

我的 Vue 代码

    mounted(){
    // this.store.methods.TextAreaAdjust(this.$refs.itemParagraph);
       
    this.editor = new Editor( {
        extensions: [ 
          StarterKit.configure({
           history:true,
          }),
          Highlight,
       ],
        content: this.modelValue.itemData.paragraph,
        onUpdate: () => {
          this.modelValue.itemData.paragraph=this.editor.getHTML()
        },

        onFocus(){
            console.log('focus fired')
            console.log(this) // editor scope
            this.$refs.editMenu.style.display="flex" // $refs undefined error
        },
        onBlur(){
            console.log('blur fired')
            this.$refs.editMenu.style.display="none"
        }

    })
},
4

1 回答 1

1

尝试on用箭头函数定义函数：

onUpdate: () => {}
ononFocus: () => {}
onBlur: () => {}

这应该保持this范围。

this否则，在创建 Editor 实例然后在处理程序中使用之前，您可能需要存储在单独的 constthisComponent中：

const thisComponent = this;
于 2021-10-01T07:05:27.557 回答