vue中输入密码带图标可见不可见切换
data() {
return {
userName: "",
pswd: "",
loginDisabled: false,
labelPosition: "top",
passwordType: 'password',
passwordIcon:require('@m/assets/images/bukejian.png'),
formLabelAlign: {
name: "",
region: "",
type: "",
},
};
},
<el-form-item label="用户密码">
<el-input class="password" v-model="formLabelAlign.region" :type="passwordType" ref="password"></el-input>
<img
class="img_password" @click ="showPwd"
:src=passwordIcon
alt=""
/>
</el-form-item>
methods: {
...mapActions(["submitUserInfo", "submitLoginStatus"]),
showPwd(){
// alert(111)
if (this.passwordType === 'password') {
this.passwordIcon=require('@m/assets/images/kejian.png')
this.passwordType = ''
} else {
this.passwordIcon=require('@m/assets/images/bukejian.png')
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
路径请各位同学自动替换成自己的路径

浙公网安备 33010602011771号