在vue+element 中使用 autocomplete=on,实现自动补全
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
autocomplete 属性规定输入字段是否应该启用自动完成功能。(效果示例:https://www.w3school.com.cn/tiy/t.asp?f=html5_input_autocomplete)
在vue+element中使用autocomplete要注意以下几点:
1、一定要用form的submit提交事件,才能使浏览器记住input里的值
2、<input/>一定要写name属性
3、element-ui默认是将autocomplete禁用的,打开的写法为:auto-complete="on"
具体代码如下:
<!--stop的iframe阻止submit后跳转-->
<iframe name="stop" class="none"></iframe>
<!--stop的iframe阻止submit后跳转 end-->
<el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
action="http://"
target="stop">
<el-row>
<el-col :span="23">
<el-form-item label="姓名" :prop="username">
<el-input v-model="ruleForm.username"
auto-complete="on"
name="username"></el-input>
</el-form-item>
</el-col>
<el-col :span="23" class="tr">
<el-form-item class="no_m">
<el-button :loading="loading" type="primary" @click="submitForm">
提交</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
submitForm() {
// 一定要使用form的submit方法,才能记住input的输入值,auto-complete="on"才生效
this.$refs['ruleForm'].$el.submit();
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('success')
} else {
return false;
}
})
}
注:需要用到from本身的submit方法,所以给from定义action,写http://不会跳转到具体页面。而target是为了提交后不跳到其他的页面。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)