<template>
|
<div class="flex gap-2 flex-wrap">
|
<el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
|
{{ tag }}
|
</el-tag>
|
<el-input
|
v-if="inputVisible"
|
ref="InputRef"
|
v-model="inputValue"
|
class="w-32"
|
size="small"
|
@keyup.enter="handleInputConfirm"
|
@blur="handleInputConfirm"
|
/>
|
<el-button v-else class="button-new-tag" size="small" @click="showInput"> + {{ newLabel }} </el-button>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { nextTick, ref } from 'vue';
|
import { ElInput } from 'element-plus';
|
import type { InputInstance } from 'element-plus';
|
|
const props = defineProps({
|
newLabel: {
|
type: String,
|
default: '添加',
|
},
|
});
|
|
const inputValue = ref('');
|
const dynamicTags = defineModel({
|
type: Array<string>,
|
});
|
|
const inputVisible = ref(false);
|
const InputRef = ref<InputInstance>();
|
|
const handleClose = (tag: string) => {
|
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
|
};
|
|
const showInput = () => {
|
inputVisible.value = true;
|
nextTick(() => {
|
InputRef.value!.input!.focus();
|
});
|
};
|
|
const handleInputConfirm = () => {
|
if (inputValue.value) {
|
if (!dynamicTags.value) {
|
dynamicTags.value = [];
|
}
|
dynamicTags.value.push(inputValue.value);
|
}
|
inputVisible.value = false;
|
inputValue.value = '';
|
};
|
</script>
|
