<template>
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 10px;">
	<el-tag closable v-for="(item, index) in defaultValue" :key="index" @close="closeTag(index)" style="margin: 0;">{{item}}</el-tag>
	<el-input v-model="inputValue" :placeholder="placeholder" @keyup.enter="addTag" @blur="addTag" style="width: 100px;" />
</div>
</template>

<script>
export default {
	props:{
		modelValue:{
			type: Array,
			default: []
		},
		placeholder:{
			type: String,
			default: '请输入标签'
		}
	},
	data(){
		return {
			defaultValue: [],
			inputValue: ''
		}
	},
	watch:{
		modelValue:{
			handler(val){
				this.defaultValue = val ?? []
			},
			immediate: true
		}
	},
	mounted(){
	},
	methods:{
		closeTag(index){
			this.defaultValue.splice(index, 1)
			this.$emit('update:modelValue', this.defaultValue)
		},
		addTag(){
			if(this.inputValue){
				this.defaultValue.push(this.inputValue)
				this.$emit('update:modelValue', this.defaultValue)
				this.inputValue = ''
			}
		}
	}
}
</script>

<style scoped>
</style>