北京网站设计公司飞沐,驻马店市住房和城乡建设局网站,榆林国贸网站建设,自己怎样注册企业网站需求#xff1a;一个输入框字段需要支持多次输入#xff0c;最后传输给后台的字段值以逗号分割 解决方案#xff1a;结合了el-tag组件的动态编辑标签 那块的代码
//子组件
templatediv classinput-multiple-box idinputMultipleBoxdiv…需求一个输入框字段需要支持多次输入最后传输给后台的字段值以逗号分割 解决方案结合了el-tag组件的动态编辑标签 那块的代码
//子组件
templatediv classinput-multiple-box idinputMultipleBoxdivel-tag v-for(tag, index) in inputTagList :keyindex typeinfo closable closehandleClose(index){{ tag }}/el-tag/divel-inputv-modelinputValuekeyup.enterhandleInputConfimblurhandleInputConfimstyleflex: 1; min-width: 100pxplaceholder按下enter键或者失去焦点进行添加/el-input/div
/templatescript langts setup
import { onMounted, ref, watch } from vueconst 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 || ,)}
})
/scriptstyle langscss scoped
.input-multiple-box {width: 100%;border-radius: 4px;border: 1px solid #dcdfe6;// padding: 0 5px;display: flex;flex-wrap: wrap;
}
/style
style langscss
#inputMultipleBox {.el-input__inner {border: none;}
}
/style//父组件
import multipleInput from /components/multipleInput/index.vue
multipleInputv-model:inputTagsform.modbusplaceholder请输入clearable/multipleInput实现效果图
