场景图：

原理：

通过修改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