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>

效果如图:

​成品演示

 

​