如何在modelValue变更时保持光标处于选定位置？

核心原因 #

直接调用setSelectionRange无效是因为修改modelValue后，q-input组件尚未完成DOM重新渲染——此时输入框的文本还未同步更新，光标设置操作无法作用到最新的DOM节点上。用setTimeout虽然能生效，但延迟时间不可控，还会带来不必要的卡顿感。

无延迟解决方案：使用Vue的nextTick #

Vue的nextTick方法会在DOM更新完成后立即执行回调，能精准地在组件重新渲染完成后设置光标位置，完全替代低效的setTimeout。

修改后的update函数代码：

import { nextTick } from 'vue'

function update() {
  article.value = doc_text.toString()
  nextTick(() => {
    editor.value?.getNativeElement().setSelectionRange(pos.value.index, pos.value.index)
  })
}

进阶方案：自动监听modelValue变化维护光标 #

如果需要每次article值变化时都自动恢复光标位置，可以通过watch结合nextTick实现，无需手动在update中重复编写光标逻辑：

import { watch, nextTick } from 'vue'

watch(article, () => {
  nextTick(() => {
    editor.value?.getNativeElement().setSelectionRange(pos.value.index, pos.value.index)
  })
})

额外注意事项 #

• 确保pos.value.index是基于最新文本计算的正确偏移量，避免光标定位到错误区域。
• 若使用Yjs等协同编辑库，建议在Yjs的文本变更回调中实时计算光标偏移，保证协同场景下光标位置的准确性。

内容的提问来源于stack exchange，提问作者MarekAurelius