Vue、iview组件库-Dropdown 下拉菜单组件支持上下

Dropdown 下拉菜单组件支持上下按键选中并可以回车，填充相关信息

<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循环进行对比，匹配成功后给需要填充值的输入框填充对应的值即可。

}