问题:项目过程中密码框自带的小眼睛时有时无,输入密码后鼠标移动到其他地方点击一下再移回来,小眼睛消失,无法查看明文密码

解决方法:自己写一个小眼睛定位到input框后。

        1.定义两个input框,类型分别为text(明文密码)和password(暗文密码),ng-if 来判断当前哪个框隐藏/显示 

         2.input框后定义一个小眼睛的图标,点击事件结合样式控制显示睁眼还是闭眼

 

Angular写法

HTML代码:

<div class="item" ng-init="pswShow = false">
    <span>
        <input type="text" class="text inline-block" ng-model="params.szPassword" ng-if="pswShow"/>
        <input type="password" class="text inline-block" ng-model="params.szPassword" ng-if="!pswShow"/>
        <span class="eye" ng-class="{true: 'open', false: 'close'}[pswShow]" ng-click="pswShow=!pswShow"></span>
    </span>
</div>

CSS代码:

.eye{
  width: 16px;
  height: 14px;
  position: absolute;
  display: inline-block;
  cursor: pointer;
  left: 328px;
  top: 127px;
}
.eye.close {
  background: url(../images/pigsney-close.png) center center no-repeat;
}
.eye.open {
  background: url(../images/pigsney-open.png) center center no-repeat;
  background-color: #FFFFFF
}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐