您的位置:首页 > 教育 > 锐评 > element ui 的密码输入框点击显示隐藏密码时,图标随之改变

element ui 的密码输入框点击显示隐藏密码时,图标随之改变

2025/5/14 15:41:58 来源:https://blog.csdn.net/qq_59626859/article/details/139156776  浏览:    关键词:element ui 的密码输入框点击显示隐藏密码时,图标随之改变
场景图:

原理:

通过修改el-input框的type属性,来设置显示或者隐藏。从而改变图标地址。

   <el-input class="passwordinput" :type="pwdObj.pwdType" ref="pwdInput" placeholder="密码"v-model="loginObj.password"><template #suffix><el-image slot="suffix" class="input-icon" :src="getIconUrl(pwdObj.pwdType === 'text' ? 'open-eye' : 'close-eye')"fit="scale-down"@click="changeye('pwdType', 'pwdInput')" /></template></el-input>pwdObj: { pwdType: 'password' }, 默认为password//点击图标控制密码的显示和隐藏changeye(typeName, refName) {$set(对象,对象属性,属性值)如果点击时类型为password就变为text 反之相反this.$set(this.pwdObj,`${typeName}`,this.pwdObj[`${typeName}`] === 'password' ? 'text' : 'password')this.$refs[`${refName}`].focus()},computed: {// 通过计算属性获取图标getIconUrl() {return function (name) {return require(`@/assets/vietanm/${name}.png`)}},},我的图标是本地图标,且名称分别为open-eye 和 close-eye

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com