vue项目element-ui中el-select回车键隐藏下拉框,实现按回车键查询
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
需求:
1、页面中有输入框,选择框,日期时间选择,按回车键实现查询功能
网上查了都是在el-select弹框消失时(visible-change返回false),使select失去焦点的,然后页面document绑定keyup事件。
这样做,如果页面上其它控件有回车事件,就会被覆盖掉,比如分页选择器中的回车事件。
解决思路:
1、隐藏下拉框:查看el-select源码发现下拉框的显示隐藏由visible变量在回车键按下去时(keydown)控制。这就好办了,给组件设置keydown事件,控制组件上的visible为false隐藏即可。
2、按回车键事件查询,组件上添加@keyup.enter.native="query"
query是查询方法
<el-select
ref="loanTypeSelect"
v-model="queryData.loan_type"
clearable
:placeholder="$t('operation.select')"
@keydown.enter.native="disableVisible"
@keyup.enter.native="query"
>
<!-- 添加ref="loanTypeSelect" -->
<!-- 添加@keydown.enter.native="disableVisible" -->
disableVisible() {
this.$refs.loanStatusSelect.visible = false
}
3、日期选择框实现回车键查询稍麻烦,
在日期选择框下添加一个input标签(使其不可见,不能display:none;否则无法获取焦点)
<input ref="queryInput" style="position:absolute; z-index:-99;" type="text" @keyup.enter="query">
在change事件方法中每次改变日期后,这个添加的隐形input框都会获取焦点;再给这个input标签设置@keyup.enter="query"
即可
<time-select
:title="$t('collection.repaymentDate') + ':'"
:is-close="manageClose"
:need-time="true"
@tiems="repaymentDates"
@focus-btn="focusBtn"
></time-select>
<input ref="queryInput" style="position:absolute; z-index:-99;" type="text" @keyup.enter="query">
<!-- 此处选择器是el-select经过封装后,但思路一致 -->
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 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)