问题:

在 vue 项目中使用 vue-quill-editor 时, 总会发生富文本自动获取焦点的情况, 有时可能会导致进入富文本所在页面时, 页面不在最顶端的尴尬状况…

原因:

vue-quill-editor 富文本插件在我们 发起 ajax 请求成功并且有数据回填（或富文本内容改变）的操作后 就会 自动获取焦点;

解决办法:

由此可知, 我们只需在 vue-quill-editor 富文本插件 发起 ajax 请求成功并且有数据回填的操作后 失去焦点即可, 代码如下:

async editShowDialogFN(data) {
  try {
    // 发起请求
    const res = await articleDetailAPI(data)
    // 请求成功后数据回填
    this.formDialog = res.data
    // 富文本编辑器自动获取焦点处理
    this.$nextTick(function() {
      this.$refs.myQuillEditor.quill.enable(true)
      this.$refs.myQuillEditor.quill.blur()
    })
  } catch (error) {
    console.error(error)
  }
}