给我写一个vue输入框实现鼠标光标处插入字符串
时间: 2023-04-01 18:03:05 浏览: 105
将光标定位于输入框最右侧实现代码
好的,这是一个简单的 Vue 输入框实现鼠标光标处插入字符串的代码示例:
<template>
<div>
<input type="text" ref="input" v-model="text" @click="handleClick" />
</div>
</template>
<script>
export default {
data() {
return {
text: "",
};
},
methods: {
handleClick(event) {
const input = this.$refs.input;
const startPos = input.selectionStart;
const endPos = input.selectionEnd;
const insertText = "要插入的字符串";
this.text =
this.text.substring(, startPos) +
insertText +
this.text.substring(endPos, this.text.length);
input.selectionStart = startPos + insertText.length;
input.selectionEnd = startPos + insertText.length;
input.focus();
},
},
};
</script>
阅读全文