目录
- vue input输入框中的值变成黑点
- input标签选中样式设置及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中input框的禁用和可输入问题
- vue中使用@blur获取input val值
- Vue Input输入框自动获得焦点的有效方法