写html代码,使用element 做一个按钮,点击一下,在当前组件里的textarea标签里,光标所在位置,增加一个字符串,使用ref
时间: 2024-03-16 12:41:19 浏览: 18
好的,以下是代码示例:
```html
<template>
<div>
<textarea ref="myTextarea"></textarea>
<el-button @click="addString">添加字符串</el-button>
</div>
</template>
<script>
export default {
methods: {
addString() {
// 获取当前textarea元素
const myTextarea = this.$refs.myTextarea;
// 获取当前光标位置
const startPos = myTextarea.selectionStart;
const endPos = myTextarea.selectionEnd;
// 获取当前textarea的值
const oldValue = myTextarea.value;
// 新字符串
const newStr = '这是新添加的字符串';
// 拼接新的值
const newValue = oldValue.substring(0, startPos) + newStr + oldValue.substring(endPos);
// 更新textarea的值
myTextarea.value = newValue;
// 更新光标位置
myTextarea.selectionStart = startPos + newStr.length;
myTextarea.selectionEnd = startPos + newStr.length;
// 触发输入事件
myTextarea.dispatchEvent(new Event('input'));
}
}
}
</script>
```
这里使用了element-ui中的按钮组件,通过@click绑定addString方法,点击按钮后会触发此方法。在addString方法中,首先通过ref获取当前组件的textarea元素,然后获取当前光标位置和textarea的值。接着,使用新的字符串拼接出新的textarea的值和光标位置,并更新textarea的值和光标位置。最后,手动触发输入事件,使得textarea的值能够及时更新。