专业黑帽seo_网站app定制_企业如何做网站_产品推广方案怎么做

<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-inputid="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.lengthlet endtsbqnr=this.ruleForm.kcts.slice(startN+1,endN)let IStsbqlbnr=falsethis.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-iconref="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-inputid="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.lengthlet endtsbqnr=this.ruleForm.kcts.slice(startN+1,endN)let IStsbqlbnr=falsethis.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>