Vue 使用el-input实现密码隐藏显示功能

想回家的一天

已于 2024-12-17 15:42:55 修改

阅读量463

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-12-10 15:48:33 首次发布

本文链接：https://blog.csdn.net/weixin_63023132/article/details/144375767

版权

1.首先查阅官网el-input的用法

官网链接：Element - The world's most popular Vue UI framework

官网很明确的给出了两种方法，使用prefix 和 slot。以下仅对prefix方式进行实现

2.编写Vue和js代码

控件资源库链接：iconfont-阿里巴巴矢量图标库

vue部分代码

<el-input class="form__input" :type="passwordVisible ? 'text' : 'password'" placeholder="密码" v-model="password">
    <template #suffix>
        <img :src="passwordVisible ? require('@/assets/images/open_eyes.svg') : require('@/assets/images/close_eyes.svg')" 
              alt="eye-icon"
              @click="showPassword" 
              style=" margin-left: 5px; width: 20px; height: 20px; vertical-align: middle;"/>
    </template>
</el-input>

#script部分

showPassword() {
    this.passwordVisible = !this.passwordVisible
},

js部分代码

.form__input {
    width: 350px;
    height: 40px;
    margin: 4px 0;
    padding-left: 16px;
    font-size: 13px;
    letter-spacing: 0.15px;
    border: none;
    outline: none;
    color: var(--input-color);
    font-family: "Montserrat", sans-serif;
    background-color: #ecf0f3;
    transition: 0.25s ease;
    border-radius: 8px;
    box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}

.form__input:focus {
    box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}