使用 el-dropdown 实现 el-select 的效果

发布时间 2023-04-03 01:04:40作者: BillBie

一:效果

  效果1:点击el-input后,展开 下拉菜单, 选择一个选项后,在el-input组件显示被选择的数据

  效果2: el-dropdown-menu 有一定高度,超过scroll 滚动

  效果3:再次打开高亮被选择的数据

  效果4:打开下拉选项后,滚动条定位到被选择item的位置

 

 

二:实现方式:

  效果1:点击el-input后,展开 下拉菜单, 选择一个选项后,在el-input组件显示被选择的数据

    ①.el-dropdown 组件绑定 @command事件

    ②.el-dropdown-item 组件绑定 command 属性

      

    ③.el-dropdown 组件绑定 @command事件方法中,修改el-input 中v-model 所绑定的值

     

      

 

  效果2:el-dropdown-menu 有一定高度,超过则scroll 滚动

    ①.给el-dropdown-menu 设置样式  

      

      

 

 

 

  效果3: 再次打开高亮被选择的数据

     ①.定义被选择的css样式  

      

     ②.判断被选择的item,则给予 高亮的样式

      

  效果4:打开下拉选项后,滚动条定位到被选择item的位置

 

 

     ①.思路:当打开el-dropdown-menu 组件时,判断 被选择的item是第几个(index),计算出每个item 的高度,然后使用el-dropdown-menu 组件 的scrollTop属性达到定位的目的

     ②.可以使用 el-dropdown 组件的@visible-change事件,在显示/隐藏时触发的事件        

      

 

      ③.这里有一个难点是:在visible-change触发过程中,el-dropdown-menu组件和 每个el-dropdown-item的高度都是0,因为display:none。解决办法是:当visible-change 事件完成之后,再去计算高度

      

       

      

      onVisibleChange(val){
        new Promise((resolve,reject) => {
          if(val){
            }
          resolve()
        }).then(()=>{ // 等待onVisibleChange 事件完成后再去定位和计算
          const index_num = this.icons.indexOf(this.menu.front_end_icon) //计算被选中的item在整个items的序号
          const list = document.getElementsByName("dropdown_menu_id")[0];//找到el-dropdown-menu组件
          const targetLi = document.getElementById(this.menu.front_end_icon);// 找到被选中item的组件
          const nodeHeight = targetLi.scrollHeight; // 计算每个item的高度
          list.scrollTop = nodeHeight*index_num; // el-dropdown-menu组件进行定位
          }

        )

      },
onVisibleChange方法