vue密码框的显示或隐藏

最新推荐文章于 2025-03-26 16:09:44 发布

一片舟

最新推荐文章于 2025-03-26 16:09:44 发布

阅读量1.5k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45161039/article/details/107636034

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue项目中实现密码输入框的显示与隐藏功能，通过在data中定义状态参数，并结合methods方法控制样式切换，实现密码的明文和密文模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input

	    <el-form-item prop="password">
          <el-input
            :type="passwordType"
            placeholder="密码"
            name="password"
          />
          <span class="show-pwd" @click="showPwd">
         	<!--眼睛图标-->
            <i
              :class="
                'iconfont ' +
                  (passwordType === 'password'
                    ? 'icon-icon-eye-close'
                    : 'icon-zhengyan')
              "
            ></i>
          </span>
        </el-form-item>

data加一个参数

	data(){
		return {
			 passwordType: "password",
		}
	}

method

 	showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },

style

.show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }