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

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

不爱吃饭爱吃菜

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

阅读量1.4k

点赞数 7

文章标签： javascript 开发语言 ecmascript

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

版权

在这里插入图片描述

				<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;
}