用vue写原生input密码框的文字显示/隐藏，通过v-if判断或改变type属性实现

一时失言乱红尘 2021-10-19 03:38 1049阅读 0赞

要通过vue根据所提供的图片点击时显示/隐藏密码框的内容！

效果图

![2019081514245346.png][]

![20190815142513656.png][]

方法一：

通过点击最右边的图标来实现，可以结合vue的v-if ,v-else判断加点击事件完成。

//表单中密码部分  
    <el-form-item prop="password">
                <div class="inputs">
                  <label class="label1">
                    <img src="../assets/icons/pass.png" class="icon_img" />
                  </label>
                  <input
                    v-model="FormData.password"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                    class="longin_inputs"
                    v-if="ispwda"
                  />
                  <input
                    v-model="FormData.password"
                    type="text"
                    placeholder="请输入密码"
                    show-password
                    class="longin_inputs"
                    v-else
                  />
                  <span class="label2" @click="showPwd()">
                    <img src="../assets/icons/pwda.png" class="icon_img" v-if="ispwda" />
                    <img src="../assets/icons/pwds.png" class="icon_img" v-else />
                  </span>
                </div>
              </el-form-item>

分别给被点击的图标和改变的input框绑定一个值，再判断即可。

ispwda: true,

showPwd() {
          if (this.ispwda) {
            this.ispwda = false;
          } else {
            this.ispwda = true;
          }
        }

方法二：通过改变input框的type属性实现

<el-form-item prop="newPwd">
    
                    <input
                      v-model="ruleForm.newPwd"
                      :type="isPassword"
                      placeholder="输入新密码"
                      class="form-input"
                      clearable               
                    />
                    <span class="label2" @click="showPwd()">
                      <img src="../../assets/icons/hide2.png" class="icon_img" v-if="isnewPwd" />
                      <img src="../../assets/icons/show2.png" class="icon_img" v-else />
                    </span>
                
              </el-form-item>

return {
          isPassword:'password',
          isnewPwd：false
          
      },
      created() {},
      methods: {
    showPwd() {
          if (this.isnewPwd) {
            this.isPassword='text';
            this.isnewPwd = false;
           
          } else {
            this.isPassword='password';
            this.isnewPwd = true;
            
          }
        }
    
    }

[2019081514245346.png]: /images/20211018/cfe2a23aa5c44710858ee86be8b450fd.png
[20190815142513656.png]: /images/20211018/529865ccc80a4e17bb8554d98587b440.png