自定义input密码框眼睛显示隐藏（vue3+ts）

最新推荐文章于 2024-06-29 10:05:11 发布

sirenaki

最新推荐文章于 2024-06-29 10:05:11 发布

阅读量1.9k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_69688393/article/details/128250281

版权

本文介绍了如何在Vue3和TypeScript环境中创建一个自定义的密码输入框，包括如何添加并控制睁眼、闭眼图标，动态绑定input的type属性，以及通过点击图标切换密码的显示和隐藏状态。

摘要由CSDN通过智能技术生成

效果展示：

1、引入睁眼、闭眼图标。

2、input框动态绑定type，默认为password。

3、图标设置click事件，v-show控制图标，定义showPassword == false默认闭眼，点击图标时showPassword 取反。showPassword.value == false时，type为password（密码不显示）；showPassword.value == true，type为text（密码显示）

 <div class="bigBox">
      <img src="@/assets/login/password.png" alt="" class="pswImg" />
      <input :type="type" placeholder="password" v-model="loginData.password"  />
      <div class="eyeImage" &#