输入框光标处添加任意字段

最新推荐文章于 2024-06-25 13:43:02 发布

liuxi_happy

最新推荐文章于 2024-06-25 13:43:02 发布

阅读量235

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/liuxi_happy/article/details/137083402

版权

本文介绍了如何在Vue项目中使用ElementUI组件实现表单中相关参数的选择与动态插入到通知内容区域，同时保持焦点位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 点击相关参数，会在通知内光标处添加字段
<el-form ref="form" :rules="rules" :model="form" label-width="140px" @submit.native.prevent>

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="相关参数:" prop="customerDictName" v-if="title=='编辑'">
                            <span v-for="(item,index) in form.list" :key="index">
                                <el-tag class='parameter' @click="insert(item.name)">{{item.name}}</el-tag>
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="通知内容:" prop="region">
                            <el-input v-model="form.region" type="textarea" maxlength="500" :rows="2"
                                clearable placeholder="请输入标签描述" :disabled='status' id="textarea" ref="singleText"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

 // 焦点处填入数据
        async insert(myValue) {
            const myField = this.$refs.singleText;
            if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                this.$set(this.form,'region', myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length))
                await this.$nextTick();
                myField.focus();
                myField.setSelectionRange(
                endPos + myValue.length,
                endPos + myValue.length
                );
            } else {
                this.$set(this.form,'region', this.form.region += myValue)
            }
        },