element-plus 使用密码输入框的自定义图标

最新推荐文章于 2024-12-27 14:59:27 发布

不爱吃饭爱吃菜

最新推荐文章于 2024-12-27 14:59:27 发布

阅读量1.5k

点赞数 7

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_45288172/article/details/134693600

文章描述了一个使用Vue.js开发的表单组件，包含一个可以切换显示/隐藏的新密码输入框，通过`v-model`绑定值，`ScIcon`控制图标显示状态，实现密码输入的隐私保护。

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

在这里插入图片描述

				<el-input
                  v-model="ruleFormPassword.newPassword"
                  placeholder="请输入新密码"
                  :type="showPassword ? 'text' : 'password'"
                  :style="{ width: '360px' }"
                >
                  <template #suffix>
                    <span class="input_icon" @click="switchPassword">
                    //icon图标
                      <ScIcon v-if="showPassword" style="font-size: 16px" name="icon-mimaxianshi" />
                      <ScIcon v-else style="font-size: 16px" name="icon-mimayincang" />
                    </span>
                  </template>
                </el-input>

const showPassword = ref('text');


// 点击切换密码显示状态
const switchPassword = () => {
  showPassword.value = !showPassword.value;
};



.input_icon {
  cursor: pointer;
  width: 25px;
  height: 15px;
  padding-right: 6px;
  padding-bottom: 10px;
}