Vue中将密码进行隐藏显示并改变图标样式

效果图

默认为不显示密码状态

点击右边小图标后，密码为显示状态。并改变图标

在次点击后返回原来的不显示状态

代码

<div>
    <div class="box">
     <img :src="openeye" @click="changeType()" alt="">
       </div>        
       <input :type="pwdType" name="password" id="password" placeholder="请输入密码"   v-model="password" @blur="Passwordvalidation()" maxlength="18"  @on-change="password" />
    </div>

<script>
	export default {
    
    
	data(){
    
    
	
	return{
    
    
    pwdType: 'password', // 密码类型
    openeye: require('../../../assets/img/user/icon_xzc/yincang.png'), //图片地址
    }
	
	},

methods:{
    
    

		#$使用三元运算符去判断当前input输入框的type值为password还是text
	 changeType() {
    
    
        this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
        this.openeye = this.openeye == require("../../../assets/img/user/icon_xzc/yincang.png")?require("../../../assets/img/user/icon_xzc/yanjing.png"):require("../../../assets/img/user/icon_xzc/yincang.png");
      },
   }
	
	

}
</script>

/* 将父盒子使用相对定位 子盒子使用相对定位做为样式进行定位  可自己按需求调试 */
.box{
    
    
 position: relative;
}
.box img {
    
    
  position: absolute;
  top:13px;
  right: 65px;
  width: 22px;
}