vue 获取div光标位置

要在Vue中获取`div`元素的光标位置，可以使用`Selection`对象和`Range`对象。下面是一个示例：

首先，在Vue组件的模板中，给`div`元素添加一个`ref`属性：

<template>
  <div ref="myDiv" contenteditable="true" @mouseup="handleMouseUp"></div>
</template>

然后，在Vue组件的方法中，定义一个`handleMouseUp`方法来处理鼠标抬起事件。在该方法中，可以通过`window.getSelection()`获取光标的位置，并使用`Range`对象获取光标相对于`div`元素的偏移量：

<script>
export default {
  methods: {
    handleMouseUp() {
      const selection = window.getSelection();
      const range = selection.getRangeAt(0);
      const divOffset = this.$refs.myDiv.getBoundingClientRect();

      const { top, left } = range.getBoundingClientRect();
      const cursorOffset = {
        top: top - divOffset.top,
        left: left - divOffset.left
      };

      console.log('光标位置：', cursorOffset);
    }
  }
}
</script>

在上述示例中，当鼠标在`div`元素上抬起时，会触发`handleMouseUp`方法。该方法获取当前光标位置的`Range`对象，并计算光标相对于`div`元素的偏移量。最后，将光标位置输出到控制台。

请注意，上述示例仅适用于在鼠标抬起时获取光标位置。如果需要实时追踪光标位置的变化，可能需要在其他事件（如键盘事件、鼠标移动事件）中监听并更新光标位置。另外，还需要考虑光标在不同元素之间移动时的情况。

如果需要在特定的时机获取光标位置，可以根据具体需求调整事件和方法的绑定方式。