vue中Vant的field输入框实现输入内容可见密码

​

有时候会有这种需求，密码输入的时候点击要显示密码再次点击隐藏。

demo 请狠狠的戳这里 ¥  https://download.lllomh.com/cliect/#/product/F422705952730242

接下来,就实现这个做个记录

​

vant 官方文档中Filed密码框没有右侧👀功能的，要自己加上！

​

先看代码：

利用 插槽 slot 插入右侧图标

      <van-field v-model="password" :type="passwordType" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]"> <template slot="right-icon"> <span class="solts" @click="switchPasswordType"> <van-icon name="eye" v-if="passwordType==='password'"/> <van-icon name="closed-eye" v-else /> </span> </template> </van-field>

switchPasswordType 方法改变  passwordType 的值即可

    switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password' },

组件用法代码:

<template> <div class="home"> <van-form @submit="onSubmit"> <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <van-field v-model="password" :type="passwordType" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]"> <template slot="right-icon"> <span class="solts" @click="switchPasswordType"> <van-icon name="eye" v-if="passwordType==='password'"/> <van-icon name="closed-eye" v-else /> </span> </template> </van-field> <div style="margin: 16px;"> <van-button round block type="info" native-type="submit">提交</van-button> </div> </van-form> </div> </template> <script> // @ is an alias to /src export default { name: 'Home', components: { }, data() { return { username: '', password: '', passwordType: 'password',//输入框类型 }; }, methods: { onSubmit(values) { console.log('submit', values); }, switchPasswordType() { this.passwordType = this.passwordType === 'password' ? 'text' : 'password' }, }, } </script> 

效果如图:

​成品演示

 

​