vue中Vant的field輸入框實現輸入內容可見密碼

有時候會有這種需求，密碼輸入的時候點擊要顯示密碼再次點擊隱藏。

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

demo 請狠狠的戳這里 c  https://download.csdn.net/download/lllomh/16817908

接下來,就實現這個做個記錄

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>

效果如圖:

成品演示