vue3,光标所在位置插入一串字符,没有选中光标的话默认在输入框最前面添加一串字符
时间: 2023-02-14 07:28:02 浏览: 56
在 Vue 3 中,你可以使用 ref 属性来获取 DOM 元素,然后使用 JavaScript 操作 DOM 元素的方法来实现。
首先,你需要在 template 中设置 ref 属性,并且给它一个唯一的名称:
```
<template>
<input ref="input" />
</template>
```
然后,在 Vue 的 methods 中定义一个方法,使用 JavaScript 的 selectionStart 和 selectionEnd 属性来获取光标的位置,然后使用 JavaScript 的 setSelectionRange 方法来设置光标位置。最后,使用 JavaScript 的 insertText 方法来插入文本:
```
methods: {
insertText(text) {
// 获取 DOM 元素
const input = this.$refs.input
// 获取光标位置
const start = input.selectionStart
const end = input.selectionEnd
// 设置光标位置
input.setSelectionRange(start, end)
// 插入文本
document.execCommand('insertText', false, text)
}
}
```
如果没有选中光标,则获取到的 start 和 end 值相等。在这种情况下,你可以使用 JavaScript 的 setSelectionRange 方法来设置光标位置。例如,如果你想在输入框最前面添加一段文本,你可以使用 setSelectionRange(0, 0) 来将光标移动到输入框最前面,然后使用 insertText 方法来插入文本。
```
methods: {
insertText(text) {
// 获取 DOM 元素
const input = this.$refs.input
// 设置光标位置为输入框最前面
input.setSelectionRange(0, 0)
// 插