网页设计网站建设过程报告,百度竞价渠道户,关于做网站公司周年大促销,wordpress 禁用谷歌想写一个系统#xff0c;对八字进行标注#xff0c;比如格局#xff0c;有些八字就有很多格局#xff0c;于是就想着使用el-tag但是#xff0c;form表单中如何处理呢#xff1f; 这个时候#xff0c;就需要自己写一个,modelValue是表单的默认属性
template对八字进行标注比如格局有些八字就有很多格局于是就想着使用el-tag但是form表单中如何处理呢 这个时候就需要自己写一个,modelValue是表单的默认属性
templatedivel-tag v-for(item,index) in keywordTags :keyindex closable closehandleClose(tag)sizesmall classmx-1{{item}}/el-tagel-input v-ifinputVisible refInputRef v-modelinputValue classml-1 w-20 sizesmall keyup.enterhandleInputConfirm blurhandleInputConfirm/el-inputel-button v-else classbutton-new-tag ml-1 sizesmall clickshowInput 新增/el-button/div
/template
script langts setup
const inputVisible ref(false)
import { nextTick,ref,watch,getCurrentInstance } from vue
import type { FormInstance, FormRules,ElInput } from element-plus
const { proxy }: any getCurrentInstance();
const emits defineEmits([update:modelValue])
const props defineProps{modelValue:String,}()
const keywordTags ref([])
const inputValue ref()
const InputRef refInstanceTypetypeof ElInput()
const showInput () {inputVisible.value truenextTick(() {InputRef.value!.input!.focus()})
}
const handleClose (tag:String) {keywordTags.value.splice(keywordTags.value.indexOf(tag),1)
}
const handleInputConfirm () {if (inputValue.value) {keywordTags.value.push(inputValue.value)}inputVisible.value falseinputValue.value
}
watch(()keywordTags,(newVal,oldVal){if (!proxy.$_.isEmpty(newVal.value)){console.log(newVal.value.join(,))emits(update:modelValue,newVal.value.join(,))}
},{immediate:true,deep:true})
watch(()props.modelValue,(newVal,oldVal){if (!proxy.$_.isEmpty(newVal)){keywordTags.value newVal.split(,)}
},{immediate:true,deep:true})
/script
style langless scoped
.w-20{width: 50px;
}
.mx-1{margin-right: 10px;
}
/style
/style使用的话参见,这样保存和编辑就很容易了。
el-form-item label标签 proptagsudf-tags v-modelform.tags/udf-tags
/el-form-item
