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如何解决空格和空行报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue之el-tree懒加载数据并且实现树的过滤问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
我们知道，Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置，那接下来，本文就来与大家分析配置解析过程中 Vite 到底做了什么？即Vite是如何加载配置文件的2023-11-11
这篇文章主要介绍了Mock.js在Vue项目中的使用,在vue.config.js中配置devServer，在before属性中引入接口路由函数，详细步骤跟随小编通过本文学习吧2022-07-07
这篇文章主要介绍了Vuex的store中的Module用法及说明，具有很好的参考价值，希望对大家有所帮助。2023-01-01
这篇文章主要介绍了vue顶部菜单栏实现小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了2分钟实现一个Vue实时直播系统的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
在JavaScript中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中极致防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
本篇文章给大家总结了Visual Studio Code断点调试Vue的方法以及心得分享，需要的朋友参考学习下。2018-02-02
最新评论