今天来看一个很简单的需求。

需求描述：在输入框光标处，插入指定的内容。

效果如下：

实现思路：刚开始还在想怎么获取光标的位置，但是发现所做的项目是基于vue3+antd组件，那么不简单了嘛，只要调用textarea组件的blur事件，就能获取到光标最后出现的位置！

示例代码：

<template>插入选项:<a-tagv-for="item in insertList":key="item"color="green"@click="handleTagClick(item)">{{ item }}</a-tag><a-textareav-model:value="inputValue":autoSize="{ minRows: 4 }"@blur="handleBlur"style="margin-top: 5px;"></a-textarea>
</template><script lang="ts" setup>
import { ref } from "vue";const inputValue = ref(); // 输入的内容
const cursorPos = ref(); // 光标的位置
const insertList = ["内容1", "tag", "标签2", "test", 'XXXX'];const handleBlur = (e: any) => {cursorPos.value = e.srcElement.selectionStart;
};const handleTagClick = (tag: string) => {if (inputValue.value === undefined) { // 输入内容为空，直接插入inputValue.value = tag;} else {const start = inputValue.value.substring(0, cursorPos.value || 0),end = inputValue.value.substring(cursorPos.value || 0);inputValue.value = `${start}${tag}${end}`;}
};
</script>

存在的问题：多次点击插入选项时，都只会往光标最后一次出现的位置，插入内容，算不算问题，这个就看具体需求啦～