需求
提高用户体验感,输入框自动聚焦并键盘控制下拉菜单的选项上下移
效果如图:
初期使用的el-dropdown下拉菜单,组件默认可键盘上下移
<el-dropdown
v-if="authoritys.length > 0"
trigger="click"
@visible-change="toggleSchoolDrop"
@command="_changeSchool"
>
<el-dropdown-menu slot="dropdown">
<el-input
v-model="searchSchoolName"
clearable
class="school-input"
size="mini"
:placeholder="$t('el.input.placeholder')"
@input="searchSchool"
/>
<div class="school-menu-list">
<el-dropdown-item
v-for="(s,i) in authoritysList"
v-show="!s.isHide"
:key="i"
:command="s.id"
>
{{ i < 9 ? `0${i + 1}` : i + 1 }}. {{ s.name }}
</el-dropdown-item>
</div>
</el-dropdown-menu>
</el-dropdown>
但是键盘按上下移不生效.
可能因为我的el-dropdown-item是由数组遍历出来的,文档的菜单是写死的.
换成el-popover组件,内部用ul和li实现遍历菜单.
<el-popover
v-if="authoritys.length > 0"
v-model="visible"
trigger="click"
@visible-change="toggleSchoolDrop"
>
<el-input
v-model="searchSchoolName"
clearable
class="school-input mr-b-m"
size="mini"
:placeholder="$t('el.input.placeholder')"
@input="searchSchool"
/>
<ul
id="school-menu-list"
class="school-menu-list"
>
<li
v-for="(s,i) in authoritysList"
v-show="!s.isHide"
:key="i"
class="result-option"
:class="{'is-active': i===activeIndex,'selectActive': i===selectIndex}"
@mouseover="_handleMouseOver(i)"
@click="_changeSchool(s.id,i)"
>
{{ i < 9 ? `0${i + 1}` : i + 1 }}. {{ s.name }}
</li>
</ul>
</el-popover>
后续需要在input框自动聚焦后再触发键盘上下移事件.
实现自动聚焦,首先想到的方法是 给el-input 添加ref，获取后调用focus()
<el-input
placeholder="请输入内容"
v-model="value"
clearable
@keyup.enter.native="confirm"
ref="sInput"
>
this.$refs.sInput.focus()
但是不生效,
后续查看element官方文档可用popover的show event手动给el-input获取焦点
<el-popover placement="bottom" width="200" trigger="manual" v-model="visible" @show="onShow">
<el-input
placeholder="请输入内容"
v-model="value"
clearable
@keyup.enter.native="confirm"
ref="sInput"
>
</el-popover>
methods: {
onShow () {
this.$refs.sInput.focus()
}
}
还是不生效,
对焦需要下拉打开后执行,也就是dom更新后所以添加 this.$nextTick生效
methods: {
onShow () {
this.$nextTick(() => {
this.$refs.sInput.focus()
});
}
}
完成搜索输入框的自动对焦后添加键盘事件,
添加的键盘事件让用户看到选择的选项样式变化以外,滚轮是不会变动的,
继续提升用户体验感,需要让滚轮随着用户的操作而滑动
<el-input
ref="searchSchool"
v-model="searchSchoolName"
clearable
class="school-input mr-b-m"
size="mini"
:placeholder="$t('el.input.placeholder')"
@input="searchSchool"
@keyup.enter.native="_handleEnter(selectIndex)"
@keyup.up.native="_handleUp"
@keyup.down.native="_handleDown"
/>
methods: {
_handleUp(){
// 实现对样式的替换
this.selectIndex = this.selectIndex === 0 ? this.authoritysList.length - 1 : this.selectIndex - 1;
let selectNum = this.selectIndex + 1;
let schoolMenuList = document.getElementById("school-menu-list");
let intervalTop = schoolMenuList.scrollTop;
// 实现在用户操作是,滚轮随着上下移的动
if (selectNum * 35 <= intervalTop){
schoolMenuList.scrollTop = (selectNum - 1) * 35;
} else if (selectNum * 35 <= intervalTop + schoolMenuList.offsetHeight){
schoolMenuList.scrollTop = intervalTop;
} else if (selectNum * 35 > intervalTop){
schoolMenuList.scrollTop = selectNum * 35;
}
},
_handleDown(){
this.selectIndex = this.selectIndex < this.authoritysList.length - 1 ? this.selectIndex + 1 : 0;
let selectNum = this.selectIndex + 1;
let schoolMenuList = document.getElementById("school-menu-list");
let intervalTop = schoolMenuList.scrollTop;
if (selectNum * 35 <= intervalTop){
schoolMenuList.scrollTop = (selectNum - 1) * 35;
} else if (selectNum * 35 <= intervalTop + schoolMenuList.offsetHeight){
schoolMenuList.scrollTop = intervalTop;
} else if (selectNum * 35 > intervalTop){
schoolMenuList.scrollTop = selectNum * 35 - schoolMenuList.offsetHeight;
}
}
}
