vue3解决切换input的type时光标定位到首部的问题

需求

手动封装一个密码输入框，有明文和密文两个形式。

UI库

使用了arco.design组件库

代码

   <a-input v-model="formValue.password" :style="{ width: '272px' }" placeholder="密码" allow-clear
      :type="passwordVisible ? 'text' : 'password'" ref="pswRef">
 <template #suffix>
   <div class="rounded-full cursor-pointer" @click.stop="handlepwd">
   <img src="@/assets/images/login/icon-eye.png" class="w-4 h-4" v-if="passwordVisible">
   <img src="@/assets/images/login/icon-invisible.png" class="w-4 h-4" v-else>
   </div>
  </template>
 </a-input>

const passwordVisible = ref(false) //类型切换开关
const pswRef = ref()
function handlepwd() {
  pswRef.value.blur()
  passwordVisible.value = !passwordVisible.value
  nextTick(() => {
    pswRef.value.focus()
  })
  // console.log('pswRef.value', pswRef.value)
}

思路

由于切换类型时，input框需要重新生成，所以先让输入框失焦，等待render完成后再自动对焦即可。