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 = ''

}

这个方法有不足之处清之处
参考文章来源:

vue 元素上同时绑定了keyup.enter和blur事件，会触发两次的解决方案_@keyup.enter 触发两次的情况-CSDN博客

element-plus Tag组件
https://element-plus.org/zh-CN/component/tag.htmlhttps://element-plus.org/zh-CN/component/tag.html