效果图
默认为不显示密码状态
点击右边小图标后,密码为显示状态。并改变图标
在次点击后返回原来的不显示状态
代码
<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;
}