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

2025专业AI写手!

已于 2023-03-13 15:18:14 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 3.0 文章标签：前端 javascript vue.js

于 2023-03-13 11:03:17 首次发布

本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/129488325

Vue 3.0 专栏收录该内容

101 篇文章

订阅专栏

本文展示了如何在使用arco.designUI库的背景下，手动创建一个具有明文和密文显示切换功能的密码输入框。代码中通过Vue.js的ref和v-model实现类型切换，并通过处理函数handlepwd来控制焦点及输入框的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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

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)
}