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

本文主要是介绍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

这篇关于element ui 的密码输入框点击显示隐藏密码时，图标随之改变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---