vue+elementUi实现密码显示/隐藏+小图标变化功能

vue+elementUi 实现密码显示/隐藏+小图标变化（js一共三行代码，其中一行为了美观）...，先给大家展示下效果图，感觉不错可以参考实现代码。

成都网站建设公司更懂你！成都创新互联只做搜索引擎喜欢的网站！成都网站制作前台采用搜索引擎认可的DIV+CSS架构,全站HTML静态,HTML5建站+CSS3网站,提供：网站建设，微信开发，微信平台小程序开发，商城开发，成都app软件开发，空间域名，服务器租售，网站代托管运营，微信公众号代托管运营。

【效果图】

vue+elementUi 实现密码显示/隐藏+小图标变化功能

【html】

// 前后代码【略】
<el-form-item label="密码" prop="pwd">
 <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请输入密码" @keyup.enter.native="login">
  <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
 </el-input>
</el-form-item>

【js】

showPwd () {
 this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';
 let e = document.getElementsByClassName('el-icon-view')[0];
 this.pwdType == '' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
},

ps:下面看下vue+element-ui实现显示隐藏密码

<template>
    <el-form :model="cuser_info" label-width="115px" label-position="left" >
     <el-row :gutter="20">
      <el-col :span="24">
       <el-form-item v-if="visible2" label="确认密码" prop="confirm_pwd">
        <el-input type="password" v-model="cuser_info.confirm_pwd" placeholder="请再次输入密码">
         <i slot="suffix" title="显示密码" @click="changePass('show',2)" 
           class="iconfont icon-xianshizy"></i>
        </el-input>
       </el-form-item>
       <el-form-item v-else label="确认密码" class="is-required" prop="confirm_pwd">
        <el-input type="text" v-model="cuser_info.confirm_pwd" placeholder="请再次输入密码">
         <i slot="suffix" title="隐藏密码" @click="changePass('hide',2)" 
           class="iconfont icon-yincangby"></i>
        </el-input>
       </el-form-item>
      </el-col>
    </el-form> 
</template>

<script>
 export default {
  name: "AddC_user",
  data(){ 
   return{
    cuser_info:{
     confirm_pwd:'',
    },
    visible2: true, 
   }
  }, 
  methods:{ 
   //控制密码显示隐藏
   changePass(value,kind) {
     this.visible2 = !(value === 'show');
   }, 
  },
 }
</script>

总结

以上所述是小编给大家介绍的vue+elementUi 实现密码显示/隐藏+小图标变化功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

分享文章：vue+elementUi实现密码显示/隐藏+小图标变化功能
链接URL：https://www.cdcxhl.com/article46/ijspeg.html

成都网站建设公司_创新互联，为您提供自适应网站、建站公司、网站设计公司、手机网站建设、全网营销推广、App设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容