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值的字段。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。