现在一上来,密码是可见的并且眼睛是睁开的,怎样才能上来密码是不可见并且眼睛是闭着的

img

img

img

<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类型,就可以了