当前位置：首页 > VUE

vue实现定位光标

2026-01-08 15:53:34VUE

Vue 实现定位光标的方法

在 Vue 中实现定位光标通常涉及操作 DOM 元素，以下是几种常见的方法：

使用 ref 和 focus 方法

通过 Vue 的 ref 获取 DOM 元素并调用 focus() 方法可以定位光标到输入框或可编辑元素。

<template>
  <input ref="inputRef" type="text" />
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus();
  }
};
</script>

动态设置光标位置

如果需要设置光标的起始或结束位置，可以使用 setSelectionRange 方法。

<template>
  <input ref="inputRef" type="text" v-model="text" />
</template>

<script>
export default {
  data() {
    return {
      text: '初始文本'
    };
  },
  mounted() {
    const input = this.$refs.inputRef;
    input.focus();
    input.setSelectionRange(2, 2); // 将光标定位到第二个字符后
  }
};
</script>

在可编辑元素中定位光标

对于 contenteditable 元素，可以使用 Range 和 Selection API 来定位光标。

<template>
  <div ref="editableDiv" contenteditable="true">可编辑内容</div>
</template>

<script>
export default {
  mounted() {
    const editableDiv = this.$refs.editableDiv;
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(editableDiv);
    range.collapse(false); // 将光标定位到末尾
    selection.removeAllRanges();
    selection.addRange(range);
  }
};
</script>

使用自定义指令

可以封装一个自定义指令来简化光标定位操作。

<template>
  <input v-focus type="text" />
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};
</script>

响应式定位光标

结合 Vue 的响应式特性，可以在数据变化后自动定位光标。

<template>
  <input ref="inputRef" type="text" v-model="text" />
  <button @click="updateText">更新文本</button>
</template>

<script>
export default {
  data() {
    return {
      text: '初始文本'
    };
  },
  methods: {
    updateText() {
      this.text = '更新后的文本';
      this.$nextTick(() => {
        const input = this.$refs.inputRef;
        input.focus();
        input.setSelectionRange(this.text.length, this.text.length);
      });
    }
  }
};
</script>