vue3使用arco.design组件输入框自动聚焦focus

描述

页面展示与编辑区分，用户点击编辑展示输入框，并且自动聚焦。

示例所用技术栈

vue3 + ts + tailwindcss
因此样式模块需要安装tailwindcss才能使用，否则需要删掉。

部分代码示例

 <span
              class="text-base"
              v-show="!element.isEdit"
            >
              {{ element.groupName? element.groupName:'未命名分组' }}
            </span>
            <a-input
              v-show="element.isEdit"
              ref="groupEditInputRef"
              :style="{width:'320px'}"
              placeholder="分组名字"
              allow-clear
              v-model="element.groupName"
              @blur="lostSate(element)"
            />
            <icon-edit
              v-show="!element.isEdit"
              size="20"
              class="ml-2 cursor-pointer hover:scale-[1.4] transition-all duration-[0.2]"
              @click="editGroupName(element)"
            />

// 点击编辑
// 注意; 控制显示的语句一定要放在前面
// * e.g:  element.isEdit = true
function editGroupName(element:any) {
  element.isEdit = true

  nextTick(() => {
    groupEditInputRef.value.focus()
  })
}