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

之前的博客中提到过使用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;
}
发布了58 篇原创文章 · 获赞 85 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/codezha/article/details/103598653