北京建网站公司飞沐,wordpress dropship,西安网站建设新闻,网站商城建设视频教程需求#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实现效果图
