el-input密码框眼睛眯住图片
时间: 2023-11-20 17:05:16 浏览: 119
el-input 标签中密码的显示和隐藏功能的实例代码
el-input密码框眼睛眯住图片是指在vue+elementUi中,通过点击小图标实现密码的显示和隐藏,并且小图标会随着密码的显示和隐藏而变化。具体实现方法可以参考以下代码:
```html
<el-input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码">
<i class="el-input__icon el-icon-view" v-show="!showPassword" @click="showPassword = true"></i>
<i class="el-input__icon el-icon-view-show" v-show="showPassword" @click="showPassword = false"></i>
</el-input>
```
```javascript
data() {
return {
password: '',
showPassword: false
}
}
```
```css
.el-input__icon.el-icon-view-show:before {
content: "\E6B4";
}
```
其中,通过v-show指令控制小图标的显示和隐藏,通过@click事件监听小图标的点击事件,通过computed计算属性控制密码框的type属性,从而实现密码的显示和隐藏。同时,通过CSS样式控制小图标的变化。
阅读全文