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

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

感觉这样不是很好,关闭了弹框再打开密码应该还是以隐藏的形式,后来试了几个属性后,发现给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,所以需要每次关闭对话框后销毁这个元素.