<template>
<div>
<div class="xym flex-h flex-between">
<input class="input" placeholder="请输入密码" v-model="password" :type="inputType" />
<img src="../assets/images/eye_no.png" class="btn_mmbkj" v-if="eye" @click="showPassword()" />
<img src="../assets/images/eye.png" class="btn_mmkkj" v-else @click="showPassword()" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
password:'', //v-model input 数据双向绑定
eye:false,
inputType:''
};
},
methods: {
//点击图标 密码显示隐藏 切换
showPassword:function(){ /*密码显示 */
// var me = this;
if (this.eye) {
this.eye = false
this.inputType = 'text'
} else {
this.eye = true
this.inputType = 'password'
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
给input加个 type="password"
眼睛你可以默认就放闭着的,在通过事件改变
现在官网没有监听这个事件,而那个小眼睛也一直是张开的,要是想实现切换图标的效果,就不能用官网的show-passward,要自己定义两个icon一个张开眼睛,一个关闭,然后同时还要控制input 的type类型,就可以了