如何实现el-input标签中密码的显示和隐藏功能

发布时间:2021-06-26 14:34:46 作者:小新
来源:亿速云 阅读:2697

这篇文章将为大家详细讲解有关如何实现el-input标签中密码的显示和隐藏功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

效果展示:

  密码隐藏:

如何实现el-input标签中密码的显示和隐藏功能

  密码显示:

如何实现el-input标签中密码的显示和隐藏功能

代码展示:

   一:<el-input>标签代码

 <el-form-item label="密码" prop="password">
   <el-input :type="passw" v-model="adduser.password"  >
      <%-- input中加图标必须要有slot="suffix"属性,不然无法显示图标 --%>
      <i slot="suffix" :class="icon" @click="showPass"></i>
   </el-input>
 </el-form-item>

  二:<script type="text/javascript">中代码

<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      users:[],
      total:100,
      pageSize:5,
      pageNum:1,
      //用于显示或隐藏添加修改表单
      add:false,
      //用于改变Input类型
      passw:"password",
      //用于更换Input中的图标
      icon:"el-input__icon el-icon-view",
      adduser:{
        id:null,
        name:null,
        password:null,
        dept_id:null
      },
    },
    methods:{
       //密码的隐藏和显示
      showPass(){
          //点击图标是密码隐藏或显示
        if( this.passw=="text"){
          this.passw="password";
          //更换图标
          this.icon="el-input__icon el-icon-view";
        }else {
          this.passw="text";
          this.icon="el-input__icon el-icon-loading";
        };
      }
    },
  })
</script>

关于“如何实现el-input标签中密码的显示和隐藏功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. Vue基于iview如何实现登录密码的显示与隐藏功能
  2. js怎么实现input密码框显示/隐藏功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

el-input

上一篇:MySQL事务与MVCC怎么实现隔离级别

下一篇:Android 中怎么远程调试设备浏览器网页

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》