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> 

效果如圖:

​成品演示

 

​