Element UI 密码输入框--可切换显示隐藏，自定义图标

最新推荐文章于 2025-05-07 17:25:45 发布

朝阳39

最新推荐文章于 2025-05-07 17:25:45 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # Element UI 文章标签： vue.js elementui 密码输入框

本文链接：https://blog.csdn.net/weixin_41192489/article/details/133940676

Element UI 专栏收录该内容

44 篇文章

订阅专栏

文章描述了一个使用Vue.js实现的表单组件，其中包含一个密码输入框，可以通过点击图标实现密码显示和隐藏的功能。开发者展示了如何在数据和方法中管理密码的显示状态以及相应的图标切换。

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

在这里插入图片描述

      <el-form-item prop="password">
        <el-input
          @keyup.enter.native="login"
          placeholder="密码"
          v-model="formData.password"
          :type="showPassword ? 'text' : 'password'"
        >
          <i slot="suffix" @click="switchPassword">
            <img
              v-if="showPassword"
              class="input_icon"
              src="@/assets/icons/password_show.png"
            />
            <img
              v-else
              class="input_icon"
              src="@/assets/icons/password_hide.png"
            />
          </i>
        </el-input>
      </el-form-item>

.input_icon {
  cursor: pointer;
  width: 24px;
  padding-top: 8px;
  padding-right: 6px;
}

data 中

      // 是否显示密码
      showPassword: false,

methods 中

    switchPassword() {
      this.showPassword = !this.showPassword;
    }

图片素材
在这里插入图片描述