如何在Vue.js中自动对焦毛刺编辑器？

Question

我在vue 3中使用vue 3，无法找到一种方法来自动对焦他们的文档中的编辑器输入字段。

我尝试用以下方法锁定父元素：

document.getElementById(...).focus()

什么都没做。这就是我如何实现quill，text-editor.vue

<template>
  <div id="text-editor" class="text-editor">
    <quill-editor :modules="modules" :toolbar="toolbar"/>
  </div>
</template>


<script setup>
import BlotFormatter from 'quill-blot-formatter'

const modules = {
    module: BlotFormatter,
}

const toolbar = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'align': [] }],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'font': [] }],
    ['link', 'image', 'video'],
    ['clean']
];
</script>

并在component.vue中导入

<template>
  <div id="component">
    <text-editor/>
  </div>
</template>


<script setup>
import textEditor from './text-editor'
</script>

知道怎么用autofocus笔吗？

Answer 1

我找到了解决办法。只需使用@onReady事件即可。就这么简单：

    <QuillEditor
    theme="snow"
    @ready="onReady"
  />

然后添加以下方法：

 methods: {
    onReady(editor) {
      editor.focus();
    },
  },