Dropdown 下拉菜单组件支持上下按键选中并可以回车，填充相关信息
image
<Dropdown
class="auto-complete-dropdown"
width="500"
placement="bottom-start"
@on-click="invoiceDropdownClick"
@on-visible-change="visivle"
>
<input href="javascript:void(0)" @keyup.enter="invoiceDropdownClick(listSelectedName)" @keyup.up="upClick" @keyup.down="downClick" class="auto-complete-input" placeholder="请输入名称" v-model="invoiceDetails.purchaserName" type="text"> <DropdownMenu slot="list">
<DropdownItem ref="list" :selected="listSelected===index?true:false" :name="item.id" v-for="(item,index) indata2" :key="index">{{item.customerName}}</DropdownItem>
</DropdownMenu>
</Dropdown>
data(){
return{
listSelected: -1, //默认选择名称列表项
listSelectedName: "", //列表id
}
}
需要用到
@on-visible-change="visivle"
@keyup.enter
@keyup.up
@keyup.down
原理是：在DropdownItem上绑定ref，通过操作$refs.xxx进行选中和回车事件
//显示关闭下拉菜单重置选中项(可根据需求更改，默认不写此方法会再次打开下拉菜单会选中上一次选中的菜单项)
visivle(e) {
if (e === false) {
this.listSelected = -1;
}
},
//listSelectedName接受的是组件:name属性的"item.id"的值。根据需求可能绑定的值不一样。这块的name是根据选中项的ID给其他输入框填充信息
//下方向键
downClick() {
let listLength = this.$refs.list.length;
if (this.listSelected < listLength - 1) {
this.listSelected++;
this.listSelectedName = this.$refs.list[this.listSelected].name;
this.listVisible = false;
} else {
this.listSelected = 0;
}
},
//上方向键
upClick() {
let listLength = this.$refs.list.length;
if (this.listSelected <= 0) {
this.listSelected = listLength - 1;
} else {
if (this.listSelected < listLength) {
this.listSelected--;
this.listSelectedName = this.$refs.list[this.listSelected].name;
this.listVisible = false;
} else {
this.listSelected = listLength - 1;
}
}
},
//回车事件、单击事件。回车事件和单击事件根据具体需求可以写成一个。
invoiceDropdownClick(e){
//将选中项ID传过来，通过for循环进行对比，匹配成功后给需要填充值的输入框填充对应的值即可。
}
