vue中如何监听textarea光标移动时 将光标设置在文本末尾

 在Vue中监听textarea光标并将光标设置在文本末尾，可以使用以下方法：

1. 首先，在Vue模板中，使用v-model指令绑定textarea的值到data中的一个变量。

2. 在mounted生命周期钩子中，使用$refs属性获取到textarea元素，并添加focus事件和blur事件的监听器。

3. 在focus事件中，使用setCursorPosition函数将光标设置在文本末尾。

4. 在blur事件中，使用saveCursorPosition函数保存光标位置。

以下是一个示例代码：

<template>
  <textarea v-model="text" ref="textarea"></textarea>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  mounted() {
    this.$refs.textarea.addEventListener('focus', this.handleFocus);
    this.$refs.textarea.addEventListener('blur', this.handleBlur);
  },
  beforeDestroy() {
    this.$refs.textarea.removeEventListener('focus', this.handleFocus);
    this.$refs.textarea.removeEventListener('blur', this.handleBlur);
  },
  methods: {
    handleFocus() {
      this.setCursorPosition(this.$refs.textarea, this.$refs.textarea.value.length);
    },
    handleBlur() {
      this.saveCursorPosition(this.$refs.textarea.selectionStart);
    },
    setCursorPosition(element, position) {
      element.setSelectionRange(position, position);
    },
    saveCursorPosition(position) {
      this.cursorPosition = position;
    }
  }
};
</script>

在上面的代码中，handleFocus函数使用setCursorPosition函数将光标设置在textarea的文本末尾，handleBlur函数使用saveCursorPosition函数保存光标位置。在组件销毁前，需要移除事件监听器以避免内存泄漏。