【解决方案】element show-password弹框关闭如何将小眼睛还原

背景描述

因为我们的密码输入框是放在弹出框里的，element show-password 在弹框里打开小眼睛,关闭弹框,再打开小眼睛仍开着，感觉比较尴尬，如下：

问题：
打开小眼睛后，不刷新页面下一次打开弹框，
小眼睛还是打开的……

解决方案

当关闭弹框时，通过一个变量使用v-if将输入框隐藏，打开弹框时又显示

核心代码：

html部分

 <el-dialog:visible.sync="dialogFormVisible":close-on-click-modal="false":before-close="handleDialogClose"@opened="handleDialogOpened"><el-inputv-if="pwdSwitch"v-model.trim="dataForm.password"type="password"show-password/></el-dialog>

js部分
弹框关闭后，将变量值设置false

 handleDialogClose() {this.dialogFormVisible = false;this.pwdSwitch = false;}

弹框打开时，将变量值设置true

handleDialogOpened(){this.pwdSwitch = true;
}

有更好的办法，欢迎留言和讨论。

【解决方案】element show-password弹框关闭如何将小眼睛还原相关推荐

if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这 ...
AI智能视频分析平台EasyCVR视频直播弹框关闭后再次打开视频未能从起始时间播放的问题优化
众所周知,视频融合共享AI智能分析平台EasyCVR可以根据不同客户端平台进行全平台直播,支持H.265编码视频Web直播,可以分发RTMP.RTSP.HLS.HTTP-FLV等视频流. 近期,TSI ...
element中popover弹框中有选择器，点击后popover消失的解决办法
element中popover弹框中有选择器,点击后popover消失的解决办法 element中有很多组件,经常用到的一个popover组件,很多时候大家都是使用它展示一些页面放不下或者不好放置的内 ...
弹出并点击弹框关闭自定义toast_关于别名配置使用弹框交互应用的思考
温馨提示如果你喜欢本文,请帮助我将这篇文章分享到朋友圈,喜欢我的文章,可以关注我,我们一起交流. 本文:2052字 | 估计阅读:6分钟我在思考功能实现需求的时候,会斟酌和判断使用什么样的功能和交 ...
记录element ui dialog弹框生命周期问题
今天在开发中遇到一个问题,描述如下: 点击编辑然后将列表中的数据回显出来: 场景为这样: 这个弹框是一个组件,通过父子组件传参将参数传递过去,问题是我在什么时候回显数据呢? 应该是在组件被创建时,也就 ...
bootstrap 多层弹框-关闭时导致外层滚动栏消失
问题:bootstrap form 表单内弹框, 多层模态框关闭时导致最外层滚动栏消失解决:在最外层表单中-添加 <style type="text/css">.mo ...
怎样监听 ESC 键完成一个弹框关闭
vue如何监听 ESC 键 window.addEventListener v-on:keyup.esc window.addEventListener 在Vue中,可以通过监听窗口上的键盘事件来实现 ...
VUE+Element中eldialog弹框控制最小宽度
<template><div><div><el-button @click="dialogFormVisible=true">打开& ...
弹出并点击弹框关闭自定义toast_网页自定义toast提示框
toast弱提示是应用里很常见的提示方式,它的特点是:动画出现.屏幕居中.停留一段时间自动消失. 网页原生的alert弹框不是很受大家喜欢,于是自己动手写一个,封装成方法,放在公共库里,以后用作提示信 ...

【解决方案】element show-password弹框关闭如何将小眼睛还原

背景描述

解决方案

【解决方案】element show-password弹框关闭如何将小眼睛还原相关推荐

最新文章

热门文章