elementUI极大的方便了我们的开发，但是偶尔特殊的需求还是会让人头疼。
前段时间接到过这样一个需求，使用回车来查询事件。一般来说回车事件只会绑定在输入框里面。只需要做简单的绑定@keydown.enter就好。然而，需求永远都是复杂的。希望下拉框或者时间选择器之类的选完之后也可以回车查询。
这里用一个页面来测试下。
image.png
如图所示这里有一个下拉框和一个日期选择器。代码结构如下
<div id="app" >
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
然后在父级元素上绑定按键的事件
mounted(){
document.getElementById('app').addEventListener('keydown',function () {
alert('按键触发')
})
}
screenshot.gif
可以看到下拉框可以选择触发事件，而日期选择器不能，分析原理，绑定在最外层app的事件传递到了下面，而按键事件只能触发在可聚焦元素。下拉框选中之后依然聚焦在输入框，日期选择器则相反。
同时，可以注意到下拉框在focus的情况下，回车会切换下拉项的展开与收起，这样会影响操作流畅性。
于是有了这样一个思路，在进行下拉或者日期选择操作之后focus到外层div，当然不是所有元素都能focus，为了让普通div也能focus，这里需要添加一个属性。
<div id="app" tabindex="-1">
关于tabindex的具体用法可以查文档，这里就不多赘述了。
screenshot1.gif
这里可以看到，整个div都能focus了，也可以触发相应的事件。那么我们去查看element组件的相应事件来处理。最后针对聚焦后的蓝色边框进行样式处理，就得到了我们想要的效果了。
screenshot2.gif
完整代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
#app{
width: 500px;
height: 500px;
background: red;
outline: none;
}
</style>
</head>
<body>
<div id="app" tabindex="-1">
<el-select v-model="value" placeholder="请选择" @visible-change="ifShow">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
@change="onChange">
</el-date-picker>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
value1:''
}
},
mounted(){
document.getElementById('app').addEventListener('keydown',function () {
alert('按键触发')
})
},
methods:{
onChange(){
document.getElementById('app').focus()
},
ifShow(tag){
if(!tag){
document.getElementById('app').focus()
}
}
}
})
</script>
</html>
当然，vue等框架的出现是让我们尽量少操作dom，但是这种特殊的需求下我没有想到合适的框架实现方式，如果有大神看到，希望不吝赐教。
网友评论