选择标签词汇功能（单选多选），在文本框展示

实现文本框选择功能

数据格式如下对应的是phrases.value的数据格式

let zhi = [{id: '2',caption: '景别',multiselect: false,phrases: [{prompt: '近景',promptForModel: 'maintaining a Close Shot',previewVideoURL: ''}]},{id: '3',caption: '光影（多选）',multiselect: true,phrases: [{prompt: '阳光',promptForModel: 'sunlight',previewVideoURL: ''}]}
];
s

 a.vue

<template><div><div class="designer-secondary-panel" style=""><div class="secondary-title"><span>词库</span><svg class="svg-icon" aria-hidden="true" style="width: 16px; height: 16px; color: var(--color-text-1);"><use xlink:href="#icon-close" class="svg-icon"></use></svg><el-icon class="cursor-pointer" @click="closeDialog"><el-icon-close /></el-icon></div><!----><!----><div id="designer-secondary-panel" class="secondary-content"><div class="prompt-library-box phrase"><el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick"><el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name"></el-tab-pane></el-tabs><div class="phrase-box" v-show="activeName=='first'"><div class="category" v-for="(item,index) in phrases" :key="index"><div class="category-caption">{{item.caption}}</div><div class="category-phrases"><divclass="category-phrases-item multiple"v-for="(itemSon,indexSon) in item.phrases":class="itemSon.isSelect?'active':''"@click="selectCategory(index,indexSon)":key="indexSon"><div class="el-tooltip__trigger">{{itemSon.prompt}}</div><div class="multiple-tag all-center" v-show="itemSon.isSelect&&item.multiselect"><el-icon style="width: 16px; height: 16px; color: var(--color-text-5);"><Select /></el-icon></div><!----></div></div></div></div></div><!----><!----><!----><!----><!----></div></div></div>
</template>

<script lang="ts" setup>
import {chlibraries} from '@/api/AIcreation/index';
import EventBus from '@/utils/EventBus';
const allPromptWords=ref([])
const saveRplace=ref([])
const xjYs=ref(false)
// { name: 'second', label: '我的预设' }
const tabList = ref([{ name: 'first', label: '灵感词库' }
]);
// 记录取消选中的词语内容
const noteDelContent=ref([])
const oldNoteDContent=ref([])
const selectCategory=(ifs,is)=>{let fatherC=phrases.value[ifs].caption;//允许单选选择提示词if(!phrases.value[ifs].multiselect){if(phrases.value[ifs].phrases[is].isSelect)return;for(let i=0;i<phrases.value[ifs].phrases.length;i++){if(phrases.value[ifs].phrases[i].isSelect){//保存取消选中的内容noteDelContent.value.push(phrases.value[ifs].phrases[i].prompt)phrases.value[ifs].phrases[i].isSelect=false;allPromptWords.value.splice(allPromptWords.value.indexOf(phrases.value[ifs].phrases[is].prompt),1);}}// 选中之前删除，取消选中词语记录数组中与之相同的内容if(noteDelContent.value.includes(phrases.value[ifs].phrases[is].prompt)){noteDelContent.value.splice(noteDelContent.value.indexOf(phrases.value[ifs].phrases[is].prompt),1);}phrases.value[ifs].phrases[is].isSelect=true;allPromptWords.value.push(phrases.value[ifs].phrases[is].prompt);commonEMit();return;}// 多选选择提示词if(phrases.value[ifs].phrases[is].isSelect){phrases.value[ifs].phrases[is].isSelect=false;console.log("多选取消选中了");console.log(phrases.value[ifs].phrases[is]);//保存取消选中的内容noteDelContent.value.push(phrases.value[ifs].phrases[is].prompt)allPromptWords.value.splice(allPromptWords.value.indexOf(phrases.value[ifs].phrases[is].prompt),1);commonEMit();if(!phrases.value[ifs].multiselect&&saveRplace.value.includes(fatherC)){saveRplace.value.splice(saveRplace.value.indexOf(fatherC),1);return;}return;}phrases.value[ifs].phrases[is].isSelect=true;// 选中之前删除，取消选中词语记录数组中与之相同的内容if(noteDelContent.value.includes(phrases.value[ifs].phrases[is].prompt)){noteDelContent.value.splice(noteDelContent.value.indexOf(phrases.value[ifs].phrases[is].prompt),1);}allPromptWords.value.push(phrases.value[ifs].phrases[is].prompt);commonEMit();
}const commonOptionNoteDel=(data)=>{}
const phrases=ref([])
const emit = defineEmits(['closeDialog','sendphrases'])
const commonEMit=()=>{console.log("oldNoteDContent.value.length");console.log(oldNoteDContent.value);console.log(noteDelContent.value);EventBus._emit('sendphrases', allPromptWords.value,noteDelContent.value);// if(oldNoteDContent.value.length>0){//   for(let i=0;i<oldNoteDContent.value.length;i++){//     noteDelContent.value.splice(noteDelContent.value.indexOf(oldNoteDContent.value[i]),1);//   }// }noteDelContent.value=JSON.parse(JSON.stringify(Array.from(new Set(noteDelContent.value))))// 记录上一次的旧数据oldNoteDContent.value=noteDelContent.value;
}
const closeDialog=()=>{emit('closeDialog',false)
}
const activeName = ref('first');
const handleClick = (val) => {activeName.value = val;
};
const getChlibraries=async()=>{let res=await chlibraries('1.6');phrases.value=res?.data?.data?.phrases.categoriesconsole.log(phrases.value);}
onMounted(() => {getChlibraries();
})
</script>

<style lang="scss" scoped>
@import "./../../../AIcreation/pages/Video/style/klindex.scss";
.designer-secondary-panel {height: calc(100vh - 80px);width: 400px;.secondary-title {width: 100%;height: 64px;border-bottom: 1px solid var(--border-color);display: flex;align-items: center;justify-content: space-between;background: var(--subMenuBg);padding: 0 20px;span {font-size: 16px;font-weight: bolder;}.svg-icon {cursor: pointer;}}.secondary-content {padding: 20px;width: 100%;box-sizing: border-box;}
}
.prompt-library-box {display: flex;flex-direction: column;height: 100%;width: 100%;
}
#designer-secondary-panel {flex: none;width: 100%;height: calc(100vh - 144px);// height: 100%;background-color: var(--subMenuBg);transition: all 0.3s ease;
}
.phrase-box {overflow-y: scroll;border-radius: 12px;flex-grow: 1;.category {margin-bottom: 32px;.category-caption {font-size: 14px;height: 24px;line-height: 24px;font-weight: 600;margin-bottom: 12px;}.category-phrases {display: flex;flex-wrap: wrap;gap: 8px;}.category-phrases-item {font-size: 14px;cursor: pointer;position: relative;padding: 6px 16px;border: 1px solid var(--border-color);border-radius: 8px;line-height: 24px;user-select: none;&.active{background-color: var(--el-color-primary);border: 1px solid transparent;color: #FFFFFF;&.multiple {position: relative;overflow: hidden;.multiple-tag {width: 14px;height: 12px;border-radius: 4px 0;position: absolute;right: 0;bottom: 0;background: var(--el-color-primary);}}}}}
}
.all-center {display: flex;align-items: center;justify-content: center;flex-direction: column;
}
.preset-box {overflow: hidden;flex-grow: 1;display: flex;flex-direction: column;.operation {height: 36px;flex-shrink: 0;display: flex;margin-bottom: 24px;}.operation-query {flex: 1;}.operation-btn {display: flex;height: 100%;justify-content: center;align-items: center;border-radius: 8px;background: var(--color-other-1);margin-left: 8px;padding: 0 12px;color: var(--color-text-1);cursor: pointer;&:hover {span {display: inline-block;margin-left: 4px;}}span {display: none;font-size: 14px;width:61px;}.el-icon{font-size: 20px;}}.preset-wrap {overflow-y: scroll;flex-grow: 1;flex-shrink: 1;}.presets-list {.preset-item {height: 68px;padding: 12px 16px;margin-bottom: 8px;cursor: pointer;border-radius: 8px;width: 100%;display: flex;background: var(--color-fill-light);justify-content: space-between;&:hover {background: var(--color-other-1);.content-wrap {width: calc(100% - 84px);}}&:hover .operation-wrap{display: inline-flex;display: flex;align-items: center;flex-shrink: 0;gap: 20px;}.content-wrap {width: 100%;}.operation-wrap{display: none;}div{user-select: none;}}.preset-item-name {height: 22px;margin-bottom: 2px;font-size: 13px;line-height: 22px;font-weight: 600;color: var(--color-text-1);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.preset-item-prompt {height: 22px;line-height: 22px;font-size: 13px;color: var(--color-text-2);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}.preset-edit {display: flex;flex-direction: column;.preset-edit-title {height: 24px;line-height: 24px;color: var(--color-text-1);margin-bottom: 8px;}.edit-content {margin-bottom: 24px;}.edit-operation {width: 100%;height: 32px;display: flex;align-items: center;justify-content: flex-end;button {margin-left: 10px;}}}
}
.kling-input {width: 100%;.el-input.big {height: 36px;}&.el-input {&.large {height: 40px;.el-input__wrapper {padding: 8px 16px;font-size: 14px;}}&.big .el-input__wrapper {padding: 6px 12px;font-size: 14px;}.el-input__wrapper {background: transparent;border: solid 1px var(--color-border-component);box-shadow: none;border-radius: 8px;font-weight: 400;color: var(--color-text-1);}}.el-textarea {background-color: transparent;padding: 12px 12px 32px;border: 1px solid var(--color-border-component);border-radius: 8px;.el-textarea__inner {background-color: transparent;box-shadow: none;padding: 0;color: var(--color-text-1);font-size: 13px;line-height: 22px;font-weight: 400;border: none;}.el-input__count {background: transparent;width: calc(100% - 24px);height: 12px;bottom: 12px;line-height: 12px;color: var(--color-text-3);}}
}
</style>

b.vue 

<template><el-inputv-model="creativeDescription"type="textarea"maxlength="2500" :clearable="true":rows="8"ref="creativeInputRef"resize="none"placeholder="请描述你想生成的视频内容"></el-input>
</template>
<script setup lang="ts">
onMounted(async () => { //触发增加文本内容EventBus._on('sendphrases', (data,delContent) => {getAllWorTsc.value=data.join(',')creativeDescription.value = [...creativeDescription.value.split(',').filter(item => !data.includes(item)),...data].join(',')let zhi=[]; //判断将内容删除一部分if(delContent.length>0){ zhi=creativeDescription.value.split(','); delContent.forEach((vs,index)=>{ if(zhi.includes(vs)){zhi.splice(zhi.indexOf(vs),1)}})creativeDescription.value=zhi.join(',')}})
})
onBeforeUnmount(() => { EventBus._off('sendphrases');
});
</script>