赣州网站建设公司html制作网站

需求：一个输入框字段需要支持多次输入，最后传输给后台的字段值以逗号分割
解决方案：结合了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>

实现效果图：