密码显隐问题:element-ui密码框点击预览后下次打开编辑按钮时密码仍然是上次预览的效果(也就是依然是明文显示)

chriscencen

于 2020-09-22 10:24:11 发布

阅读量720

点赞数 3

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/chriscencen/article/details/108725492

版权

本文介绍了一个关于前端开发中密码框预览功能的Bug及其解决方案。当用户预览密码后，再次打开对话框时密码仍以明文形式显示。通过设置dialog的destroy-on-close属性，可以在关闭对话框时销毁其内容，解决该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我最近在做新增用户时,使用密码框发现我点击右边的小眼睛预览明文密码后,当我关闭新增用户的表单再次重新打开时,输入密码依然是明文显示,如下图所示:

在这里插入图片描述

感觉这样不是很好,关闭了弹框再打开密码应该还是以隐藏的形式,后来试了几个属性后,发现给dialog加上destroy-on-close属性(这个属性是关闭时销毁 Dialog 中的元素)这个问题就解决了.

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose"
  destroy-on-close>
</el-dialog>

总结:关闭对话框上一次预览的效果还是存在是因为点击了预览后他密码框的type值变成了text而不是password,你再重新打开的时候它依然是text,所以需要每次关闭对话框后销毁这个元素.