#vue# mousedown、mouseup事件，JS实现密码框小眼睛显示与隐藏

需求：

密码框右侧小眼睛， 鼠标按下鼠标按键（左、右键均可）就显示出密码，

鼠标松开鼠标按键（左、右键均可）密码就隐藏

思路：

（1）首先就是排版了（不细讲）

提供右侧小眼睛的一种做法： 把输入框和小眼睛放在一个大的div里面，

然后在div里面设置相对定位，在小眼睛里面设置绝对定位（子绝父相），

然后right=40%左右，padding-top= 实际尺寸，就可以达到小眼睛在输入框的右侧显示

.signin-item { //父盒子
    position: relative;

}

.signin-item .iconkekan { // 右侧小眼睛
    position: absolute;
    right: 42%;
    padding-top: 20px;
    padding-right: 10px;
    font-size: 18px;
}

 

(2)此外，需要注意一个点，因为我们的小眼睛是需要按下的时候，变成红色，所以需要写多一个样式

.signin-item .iconkekan-hover {
  color: #DA1A14;
}

（3）接着，就要来考虑我们的按键事件以及输入框类型之前的关联性了

从需求我们可以得知， 鼠标按键事件中，会使得密码隐藏或显示（也就是输入框的类型发生改变，显示时是文本类型，隐藏时，是密码类型）

在这个时候，我们可以使用一个变量，来串联这些关系，

所以可以先设置一个变量iHover : " "（初始化状态为’‘，就是为空）

data() {
        return {
            iHover:''
        }

 (4)再接着，我们开始来写输入框的文本类型，使用三元表达式，再使用1,2,3...来进行判断， 当变量iHover === 1 的时候就显示密码类型，反之， 因为初始化时，变量iHover为" "，

所以根据 :type=" 1=== iHover? 'text' :'password'" ，一开始显示的是密码类型

 :type=" 2=== iHover? 'text' :'password'"
//判断输入框的类型

（5）下一步，我们只需要设置按键事件就可以了，设置两个事件（事件按下以及松开）， 同样也是通过变量iHover来进行判断，在按键按下事件时， 设置this.iHover（这个iHover是初始化时设置的变量） = iHover（这个iHover是我们转入事件里面的参数），让这两个参数相等 然后按键松开事件，就设置为this.iHover = '' 然后在按下按键事件里面我们传入一个1、2、3...就可以来进行判断了

 <span class="iconfont iconkekan"
                      @mousedown="changeType(1)"
                      @mouseup="recovery">
</span>

  methods: {
          changeType(iHover) { // 按键按下事件
            this.iHover = iHover
        },
        recovery() {        //按键松开事件
            this.iHover = ''
        }
    }

mousedown
当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生

mouseup
当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件
与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，
放松鼠标按钮就会触发该事件


click
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click 事件。
注意：触发click事件的条件是按下并松开鼠标左键！，按下并松开鼠标右键并不会触发click事件。

（6）完成前面几步，就可以达到隐藏显示密码的状态的，然后最后一步就是，改变小眼睛的颜色，我们只需要进行绑定class，追加样式就可以了 也是当初始化变量全等于1、2、3...就可以追加我们写的样式就可以了

demo示例

<template>
    <div class="signin">
            <h2>登录</h2>
            <div class="signin-item">
                <input placeholder="用户输入密码"
                       v-model="password" :type=" 1=== iHover? 'text' :'password'" />
                <span class="iconfont iconkekan"
                      @mousedown="changeType(1)"
                      @mouseup="recovery"
                      :class="{'iconkekan-hover' : 1 === iHover}" ></span>
            </div>
            <div class="signin-item">
                <input placeholder="用户输入密码确认"
                       v-model="rightpassword"
                       @blur="getconfirm"
                       :type=" 2=== iHover? 'text' :'password'"/>
                <span class="iconfont iconkekan"
                      @mousedown="changeType(2)"
                      @mouseup="recovery"
                      :class="{'iconkekan-hover' : 2 === iHover}"></span>
            </div> 
        </div>
</template>
    
<script>
     data() {
        return {
            iHover:''
        }
     methods: {
          changeType(iHover) { // 按键按下事件
            this.iHover = iHover
        },
        recovery() {        //按键松开事件
            this.iHover = ''
        }
    }
 }
</script>

<style>
</style>