小米公司网络营销工具,济宁seo营销,wordpress减少数据库连接,用nat123做自己的网站需求#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实现效果图
