Imagen de efecto
El valor predeterminado es no mostrar el estado de la contraseña Después de
hacer clic en el pequeño icono a la derecha, se muestra la contraseña. Y cambie el icono
para volver al estado original sin visualización después de un clic
Código
<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;
}