需求：一個輸入框字段需要支持多次輸入，最后傳輸給后臺的字段值以逗號分割
解決方案：結合了el-tag組件的動態編輯標簽 那塊的代碼

//子組件
<template><div class="input-multiple-box" id='inputMultipleBox'><div><el-tag v-for="(tag, index) in inputTagList" :key="index" type="info" closable @close="handleClose(index)">{{ tag }}</el-tag></div><el-inputv-model="inputValue"@keyup.enter="handleInputConfim"@blur="handleInputConfim"style="flex: 1; min-width: 100px"placeholder="按下enter鍵或者失去焦點進行添加"></el-input></div>
</template><script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'const props = defineProps(["inputTags", "separator"]);
const emit = defineEmits(['update:inputTags'])const inputTagList = ref([])
const inputValue = ref('')
const handleClose = (index: number) => {inputTagList.value.splice(index, 1)emit('update:inputTags', inputTagList.value.join(props.separator || ','))
}
const handleInputConfim = () => {if (inputValue.value) {inputTagList.value.push(inputValue.value)inputValue.value = ''emit('update:inputTags', inputTagList.value.join(props.separator || ','))}
}watch(()=>props.inputTags, (val, pre) => {inputTagList.value = props.inputTags.split(props.separator || ',')
});onMounted(() => {if (props.inputTags) {inputTagList.value = props.inputTags.split(props.separator || ',')}
})
</script><style lang="scss" scoped>
.input-multiple-box {width: 100%;border-radius: 4px;border: 1px solid #dcdfe6;// padding: 0 5px;display: flex;flex-wrap: wrap;
}
</style>
<style lang="scss">
#inputMultipleBox {.el-input__inner {border: none;}
}
</style>//父組件
import multipleInput from '@/components/multipleInput/index.vue'
<multipleInputv-model:inputTags="form.modbus"placeholder="請輸入"clearable></multipleInput>

實現效果圖：