AntDesign-Vue登录页中密文切换且带前缀icon的a-input

<a-form-item>
      <a-input size="large" placeholder="请输入密码" autocomplete="autocomplete" :type="passwordType"
                                     v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                            >
            <a-icon slot="prefix" type="lock"/>
            <a-icon slot="suffix" :type="flag === false ? 'eye-invisible' : 'eye'" @click="switchHandle"/>
       </a-input>
</a-form-item>

prefic代表前缀，suffix代表后缀的icon属性参数；无论是a-input还是a-icon都通过双向绑定实现密码类型的切换和icon的更换。

export default {
    data() {
            return {
                logging: false,
                error: '',
                form: this.$form.createForm(this),
                flag: false,
                passwordType: "password"
            }
    },
    methods: {
        switchHandle(){
                if(this.flag == false){
                    this.flag = true;
                    this.passwordType = 'text';
                }else{
                    this.flag = false;
                    this.passwordType = 'password';
                }
         }
    }
} 

到这里前后带icon且可以切换明文密文的密码输入框就实现了。

参考：

1.Ant Design of Vue官方文档