vue项目中使用iview组件，禁止自动填充用户名和密码解决方法

本文链接：https://blog.csdn.net/codezha/article/details/103598653

之前的博客中提到过使用input标签时，禁止自动填充用户名和密码的解决方法（传送门），但此方法不适用于iview中的input组件，添加额外隐藏input框可以解决问题，代码如下：

<Form>
    <div>
       <FormItem label="用户名" prop="verCode">
            <!--禁止用户名自动填充-->
            <Input v-model="form.Code" type="text"></Input>
            <Input v-model="form.Code" type="text" v-show="false"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
             <!--禁止密码自动填充-->
             <Input v-model="form.password" type="password" v-show="false"></Input>
              <Input v-model="form.password" type="password"></Input>
        </FormItem>
    </div>
</Form>

注意：

1、文本输入框的隐藏input应该添加在下面，密码输入框的隐藏input应该添加在上面，否则无法生效

2、v-show="false"可能不生效，可自定义样式，隐藏input达到预期效果，示例如下：

//表单部分
<Form>
    <div>
       <FormItem label="用户名" prop="verCode">
            <!--禁止用户名自动填充-->
            <Input v-model="form.Code" type="text"></Input>
            <Input v-model="form.Code" type="text" class="hide-input"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
             <!--禁止密码自动填充-->
             <Input v-model="form.password" type="password" class="hide-input"></Input>
              <Input v-model="form.password" type="password"></Input>
        </FormItem>
    </div>
</Form>

//自定义样式
.hide-input {
    width:0;
    opacity:0;
}