vue PC仿小红书发文章时添加标题效果（选择特色标签可自行输入，删除时可控制光标位置

<el-checkbox-group v-model="checkedOptions">
    <el-checkbox v-for="option in TEBQdata" :label="option.id" :key="option.id">
        {{ option.mc }}
    </el-checkbox>
</el-checkbox-group>
<div>
    <el-input
        id="edit"
        ref="myInput"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入特色标签"
        @input="handleKeyDown"
        v-model="ruleForm.kcts">
    </el-input>
</div>

data

checkedOptions: [], // 存储选中的选项值数组
TEBQdata: [
    { id: '选项1', mc: '黄金糕' },
    { id: '选项2', mc: '莲花血鸭' },
    { id: '选项3', mc: '百里香风腿' },
    { id: '选项4', mc: '香辣牛筋' },
    { id: '选项5', mc: '手撕龙虾尾' }
]

监听

    watch: {
        checkedOptions(newVal) {
            this.tsbqclick(newVal); // 打印当前选中的城市列表
        }
    },

        tsbqclick(newVal) {
            let that = this;
            let nedata = '';
            newVal.forEach(function(v, i) {
                let cc = that.getOptionTitle(v);
                nedata += cc + ';';
            });
            this.ruleForm.kcts = nedata;
        },
        getOptionTitle(value) {
            const option = this.TEBQdata.find(opt => opt.id === value);
            return option ? option.mc : '';
        },
        handleKeyDown(event) {
            let startN = this.ruleForm.kcts.lastIndexOf(';', this.ruleForm.kcts.length - 2); // 查找最后一个分号的位置，但不包括最后一个分号本身
            let endN = this.ruleForm.kcts.length
            let endtsbqnr=this.ruleForm.kcts.slice(startN+1,endN)
            let IStsbqlbnr=false
            this.TEBQdata.forEach(function(v,i){
                if(v.mc.includes(endtsbqnr)){
                    IStsbqlbnr=true
                }
            })
            if(IStsbqlbnr){
                if(startN<0){
                    startN=0
                }
                const editValue = document.getElementById("edit");
                editValue.focus();  //控制光标，首先要获取到焦点
                edit.setSelectionRange(startN,endN);
            }
        }

完整代码

<template>
    <div class="subject">
        <el-form :model="ruleForm"
                 status-icon
                 ref="ruleForm"
                 label-width="130px"
                 class="addcontent">
            <div class="addfrom100">
                <el-form-item label="特色标签："
                              prop="kcts"
                              class="bitianxian">
                    <div>
                        <el-checkbox-group v-model="checkedOptions">
                            <el-checkbox v-for="option in TEBQdata" :label="option.id" :key="option.id">
                                {{ option.mc }}
                            </el-checkbox>
                        </el-checkbox-group>
                        <div>
                            <el-input
                                id="edit"
                                ref="myInput"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入特色标签"
                                @input="handleKeyDown"
                                v-model="ruleForm.kcts">
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </div>

        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                kcts:''
            },
            checkedOptions: [], // 存储选中的选项值数组
            TEBQdata: [
                { id: '选项1', mc: '黄金糕' },
                { id: '选项2', mc: '莲花血鸭' },
                { id: '选项3', mc: '百里香风腿' },
                { id: '选项4', mc: '香辣牛筋' },
                { id: '选项5', mc: '手撕龙虾尾' }
            ]
        };
    },
    watch: {
        checkedOptions(newVal) {
            this.tsbqclick(newVal); // 打印当前选中的城市列表
        }
    },
    methods: {
        //特色标签
        tsbqclick(newVal) {
            let that = this;
            let nedata = '';
            newVal.forEach(function(v, i) {
                let cc = that.getOptionTitle(v);
                nedata += cc + ';';
            });
            this.ruleForm.kcts = nedata;
        },
        getOptionTitle(value) {
            const option = this.TEBQdata.find(opt => opt.id === value);
            return option ? option.mc : '';
        },
        handleKeyDown(event) {
            let startN = this.ruleForm.kcts.lastIndexOf(';', this.ruleForm.kcts.length - 2); // 查找最后一个分号的位置，但不包括最后一个分号本身
            let endN = this.ruleForm.kcts.length
            let endtsbqnr=this.ruleForm.kcts.slice(startN+1,endN)
            let IStsbqlbnr=false
            this.TEBQdata.forEach(function(v,i){
                if(v.mc.includes(endtsbqnr)){
                    IStsbqlbnr=true
                }
            })
            if(IStsbqlbnr){
                if(startN<0){
                    startN=0
                }
                const editValue = document.getElementById("edit");
                editValue.focus();  //控制光标，首先要获取到焦点
                edit.setSelectionRange(startN,endN);
            }
        }
        //特色标签 end
    }
};
</script>
<style scoped>
</style>