vue+element-ui实现显示隐藏密码

Posted 2021-02-07 lilelile

<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)" style="cursor:pointer;"
                     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)" style="cursor:pointer;"
                     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>