Vue input输入框中的值如何变成黑点问题
vue input输入框中的值变成黑点
上面是自定义的组件，type 和 placeholder 分别作为参数。
type="password"
type 设置为 password 就可以显示输入值变成黑点了。
上效果图：
input标签选中样式设置及input密码框可视设置
关于input标签样式使用的一些总结：
1、input标签选中时的光标紧贴边框的问题：
input标签默认光标会紧贴边框，设置padding样式可解决；
2、input标签选中样式：
input标签可对选中时的样式进行设置，同时要注意input标签外边框和内边框的影响。可通过box-shadow属性设置选中时的边框阴影。
3、input标签的type属性：
input标签的type属性有多个属性值：button、checkbox、file、hidden、image、password、radio、reset、submit、text
其中最常用的是password和text属性。
4、关于input密码框（type=“password”）密码隐藏和可视的封装思路：
input标签密码框模式下，默认状态是无法查看输入的密码的，都是小黑点替代，在与用户交互过程中会有诸多不便，使用户无法查看自己输入的密码，即使错误也不知道为啥错了。因此很多组件封装会加上小眼睛实现可视与隐藏的切换。
封装思路：
input标签没有小眼睛的图标，所以我们要加入小图标。
（1）父标签下包含input标签和小图标（两个小图标，一个隐藏一个可视）。父标签设置position：relative；属性。
（2）小图标设置position：absolute；属性，设置top、bottom、right、left等值调整到你想要的位置。
（3）js控制。给小图标定义点击事件，根据点击切换图标，同时切换type="text"和type="password"属性的input框。两个input框绑定同一个接收password值的字段。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 解决兄弟组件、跨组件深层次的通信操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了分布式医疗挂号系统之搭建后台管理系统页面，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
目前Vue3.0是会兼容大部分2.x的语法,下面这篇文章主要给大家介绍了关于Vue3.x项目开发的一些常用知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue封装上传图片和视频的组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue3中Vant的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue中ref和reactive的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue基础之模板和过滤器用法,结合实例形式分析了vue模板与过滤器的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-03-03
今天小编就为大家分享一篇vuejs点击class变化的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在众多测试框架中,Jest 因其易用性、强大功能以及与 Vue.js 的良好兼容性,成为了许多开发者的首选,本文将详细介绍如何在 Vue.js 项目中使用 Jest 进行单元测试,需要的可以参考下2024-11-11
最新评论