密码框-显示与隐藏-不触发浏览器记住密码

qq_41562817

已于 2023-12-07 14:04:43 修改

阅读量313

点赞数 1

分类专栏：组件库文章标签：前端 elementui

于 2023-12-07 14:02:28 首次发布

本文链接：https://blog.csdn.net/qq_41562817/article/details/134849603

版权

组件库专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了如何在移动端使用VantUI和Vue2实现输入框密码的显示与隐藏，以及如何在PC端的ElementUI中通过不同方式控制密码可见性，包括直接的`show-password`属性和自定义CSS样式防止浏览器记住密码。

摘要由CSDN通过智能技术生成

一、移动端 VantUI + Vue2 - 显示与隐藏 - 应该不会触发浏览器记住密码（说实话忘了-_-）

主要是通过改变变量 psdType --》实现右侧图标变化和内容变化

    <van-field
        placeholder="密码"
        v-model.trim="testForm.password"
        center
        :left-icon="require('@/assets/image/captchaCode.png')"
        :rules="[{ required: true, message: '请填写密码' }]"

        :type="psdType"
        :right-icon="psdType === 'password' ? 'eye' : 'closed-eye'"
        @click-right-icon="psdType = psdType === 'password' ? 'text' : 'password'"
        >
    </van-field>

    psdType: "password", //输入框类型

二、PC端 ElementUI + Vue2 - 显示隐藏 - 目前没有实践

添加 show-password 属性可实现显示与隐藏，就是眼睛不会变

    <el-input v-model="pwd" show-password></el-input>

三、PC端 ElementUI + Vue2 - 显示隐藏 - 不会触发

头铁，用css样式实现：

-webkit-text-security：指定形状来代替文字的显示。

none:无；circle：圆圈；disc:圆形；square；正方形；

    <el-input v-model="pwd" :class="isShowPwd ? 'none' : 'disc'">
        <i slot="suffix" class="el-input__icon icon" 
        :class="isShowPwd ? 'el-icon-s-grid' : 'el-icon-view'" 
        @click="isShowPwd = !isShowPwd"></i>
    </el-input>

    isShowPwd:true

.disc {
  /deep/ .el-input__inner {
   -webkit-text-security: disc;
 }
}

.none {
  /deep/ .el-input__inner {
   -webkit-text-security: none;
 }
}