vue项目中使用iview组件,禁止自动填充用户名和密码解决方法
之前的博客中提到过使用input标签时,禁止自动填充用户名和密码的解决方法(传送门),但此方法不适用于iview中的input组件,添加额外隐藏input框可以解决问题,代码如下:<Form><div><FormItem label="用户名" prop="verCode"><!--禁止用户名自动填充-...
·
之前的博客中提到过使用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;
}
更多推荐
已为社区贡献6条内容
所有评论(0)