写html代码,使用element 做一个按钮,点击一下,在当前组件里的textarea标签里,光标所在位置,增加一个字符串
时间: 2024-03-16 12:41:02 浏览: 16
好的,以下是使用element库创建一个按钮,点击后在当前组件中的textarea标签里插入字符串的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>按钮插入字符串</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-form>
<el-form-item>
<textarea class="my-textarea" v-model="content"></textarea>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="insertText">插入文本</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
content: ""
};
},
methods: {
insertText() {
const textarea = document.querySelector(".my-textarea");
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = "要插入的字符串";
this.content = this.content.substring(0, start) + text + this.content.substring(end);
textarea.focus();
textarea.selectionStart = start + text.length;
textarea.selectionEnd = start + text.length;
}
}
});
</script>
</body>
</html>
```
这里使用了Vue和Element库,首先创建一个包含textarea和按钮的页面,并且使用v-model指令将textarea的内容绑定到data中的content变量上。点击按钮时,会调用insertText方法,在该方法中获取textarea的光标位置,然后在content中插入字符串,最后再将光标移动到插入字符串后面。
需要注意的是,这里的textarea是使用原生的textarea标签实现的,而且需要使用querySelector方法获取到textarea元素才能进行插入操作。