vue输入框实现鼠标光标处插入字符串
时间: 2023-04-01 20:02:29 浏览: 110
可以使用JavaScript中的selectionStart和selectionEnd属性来获取光标位置,然后使用字符串的splice方法插入新的字符串。具体实现可以参考以下代码:
```
<template>
<div>
<input type="text" v-model="inputValue" @click="handleClick" ref="input" />
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
methods: {
handleClick() {
const input = this.$refs.input;
const startPos = input.selectionStart;
const endPos = input.selectionEnd;
const newStr = '插入的字符串';
this.inputValue = this.inputValue.slice(, startPos) + newStr + this.inputValue.slice(endPos);
input.selectionStart = startPos + newStr.length;
input.selectionEnd = startPos + newStr.length;
},
},
};
</script>
```