需求:
密码框右侧小眼睛, 鼠标按下鼠标按键(左、右键均可)就显示出密码,
鼠标松开鼠标按键(左、右键均可)密码就隐藏
思路:
(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>