Element Plus 动态编辑标签Tag使用@keyup.enter与@Blur冲突问题,

这是官方文档示例代码,文档具体链接https://element-plus.org/zh-CN/component/tag.html
问题描述: 发现存在使用@keyup.enter与@Blur冲突问题, @keyup.enter(就是按回车键)发现handleInputConfirm方法被执行了两次,下面是问题代码

<template>
<div class="flex gap-2">
<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-20"
size="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button v-else class="button-new-tag" size="small" @click="showInput">
+ New Tag
</el-button>
</div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

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) {
dynamicTags.value.push(inputValue.value)
}
inputVisible.value = false
inputValue.value = ''
}
</script>

(画外音: 本来想试着建议反馈的, 结果发现他们提示无视代码使用上的issue问题, 我一看这个案例, 应该也是代码使用上的问题, 就不填他的反馈表单, 又长又臭, 太难填了)

在element-plus.org这个指导使用组件的网站中, 我尝试使用了这个动态编辑标签组件,
因为代码存在问题, 本是菜鸟的我, 硬生生记住@Blur与@keyup.enter 的使用方法。
@Blur是鼠标在焦点以外的地方(一般是点击输入框以外的地方)触发一次, 这里原代码没有问题
@keyup.enter(就是按一下回车键)会导致@Blur也在后面执行一遍, 这就挺有意思的, 执行两次，后一次执行返回一个空的值, 但他的代码视觉上使用似乎是没有问题的, 这里归功于他加了对inputValue.value的if判断，所以dynamicTags数组没有添加一个空值做标签。

if (inputValue.value) {
dynamicTags.value.push(inputValue.value)
}

但是因为代码问题， if里面没有收到影响，但if外面会执行二遍，

修改方法: 停用同一个handleInputConfirm, 将 @keyup.enter指向handEnter, 代码如下:

const handEnter = (event) => {

event.target.blur()

}

<el-input

v-if="inputVisible"

ref="InputRef"

v-model="inputValue"

class="w-20"

size="small"

@keyup.enter="handEnter"

@blur="handleInputConfirm"

/>

handleInputConfirm方法可以略微修改为,看看是否会出现两次提示框

const handleInputConfirm = () => {

console.log(inputValue.value)

if (inputValue.value === '') {

alert(inputValue.value)

}

console.log('我被执行了多少次')

if (inputValue.value) {

//先判断标签是否只为空格,

/**dynamicTags是数组,添加数组元素用push

*trim()去除两端空白

*/

dynamicTags.value.push(inputValue.value.trim())

//这里可以赋值给表单form的biaoqianzu数组属性

form.biaoqianzu = dynamicTags.value

}

console.log(dynamicTags.value)

inputVisible.value = false

inputValue.value = ''

}