ElementUI浅尝辄止28:Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

1.如何使用?

移动到下拉菜单上,展开更多操作。

//通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下,下拉按钮只要hover即可,无需点击也会显示下拉菜单。


  
    下拉菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  


2.触发对象

可使用按钮触发下拉菜单。

//设置split-button属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true即可。


  
    更多菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  


  更多菜单
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  




3.触发方式

可以配置 click 激活或者 hover 激活。

在trigger属性设置为click即可。


  
    hover 激活
    
      
        下拉菜单
      
      
        黄金糕
        狮子头
        螺蛳粉
        双皮奶
        蚵仔煎
      
    
  
  
    click 激活
    
      
        下拉菜单
      
      
        黄金糕
        狮子头
        螺蛳粉
        双皮奶
        蚵仔煎
      
    
  


4.菜单隐藏方式

可以hide-on-click属性来配置。

//下拉菜单默认在点击菜单项后会被隐藏,将hide-on-click属性默认为false可以关闭此功能。


  
    下拉菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  


5.指令事件

点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作


  
    下拉菜单
  
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  




6. 不同尺寸

Dropdown 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的尺寸。

//额外的尺寸:medium、small、mini,通过设置size属性来配置它们。


  默认尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



  中等尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



  小型尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  



  超小尺寸
  
    黄金糕
    狮子头
    螺蛳粉
    双皮奶
    蚵仔煎
  

 

你可能感兴趣的:(element-ui,elementui,前端)