el-input密码如何控制点击小眼睛之后不一直明文
时间: 2023-05-08 09:56:39 浏览: 97
el-input为Element UI提供的输入框组件,其中包括了密码输入框组件,而点击小眼睛之后可以直接将密码明文化,这对于用户来说虽然很方便,但确实有一定安全风险。因此,用户希望在点击小眼睛之后,不会一直明文,而是在一定时间后再自动变回加密的状态。那么该如何实现呢?
首先,我们需要为密码输入框组件添加一个控制状态isShow来判断小眼睛状态是否为明文,然后通过v-if指令控制是否显示明文密码输入框组件。接着,我们可以通过调用setTimeout方法,在一定时间后将isShow的状态变为false,从而隐藏明文密码输入框组件。具体实现代码如下:
<template>
<el-input v-model="password" :type="isShow ? 'text' : 'password'">
<i class="el-input__icon" slot="suffix" :class="`el-icon-${isShow ? 'view' : 'close'}-eye`" @click="showPassword"></i>
</el-input>
</template>
<script>
export default {
data() {
return {
password: '',
isShow: false
}
},
methods: {
showPassword() {
this.isShow = !this.isShow;
setTimeout(() => {
this.isShow = false;
}, 5000); // 5秒后将isShow的状态变为false,隐藏明文密码输入框组件
}
}
}
</script>
以上就是一种简单的el-input密码控制小眼睛明文的实现方式,通过添加一个计时器,实现在一定时间后自动变回加密状态,增加了输入密码的安全性。