跳到主要内容
Dropdown
下拉菜单用于在一个按钮或其他控件旁边显示一些额外的选项时，用户可以点击按钮或控件，弹出一个操作列表，然后选择所需的选项。
用法
样式
可访问性

示例​

基础用法​

dropdown的触发按钮支持多种类型

  • button：按钮
  • link：超链
  • ellipsis：省略号
  • 自定义
PCPhonePad
<page>
 <module title="多种按钮配置" height="100px">
    <dropdown
           text="按钮"
           type="button"
           data="{{data}}"
           splitButton
       >
       </dropdown>
       <dropdown
           text="超链"
           type="link"               
           data="{{data}}"
       >
       </dropdown>
       <dropdown
           type="ellipsis"     
           data="{{data}}"
           
       >
       </dropdown>
       <dropdown
           text="自定义"
           data="{{data}}"
       >
       <button status="secondary" text="自定义按钮" icon="x-icon-action-copy" />
       </dropdown>
   </module>    
</page>

export default XPage({
   data: {
        data:[
                { label: '命令1', value: '1', disabled: true,tips:'提示' },
                { label: '命令2', value: '2',tips:'提示' },
                { label: '命令3', value: '3' },
                { label: '命令4', value: '4', divided: true },
            ]
   },
   show() {},
});


触发方式​

支持click和hover触发。

PCPhonePad
<page>
 <module title="触发方式" height="100px">
    <dropdown
           text="Click"
           type="button"
           data="{{data}}"
           trigger="click"
       >
       
       </dropdown>
    <dropdown
           text="Hover"
           type="button"
           data="{{data}}"
           trigger="hover"
       >
       </dropdown>
   </module>    
</page>

export default XPage({
   data: {
        data:[
                { label: '命令1', value: '1', disabled: true, },
                { label: '命令2', value: '2' },
                { label: '命令3', value: '3' },
                { label: '命令4', value: '4', divided: true },
            ]
   },
   show() {},
});


图标​

支持触发按钮（当类型为ellipsis时除外）和每个条目前面设置图标。

PCPhonePad
<page>
 <module title="设置图标" height="100px">
    <dropdown
           text="点击展开"
           type="button"
           data="{{data}}"
           icon="x-icon-action-setting"
       >
       </dropdown>
    <dropdown
           text="点击展开"
           type="link"
           data="{{data}}"
           icon="x-icon-action-setting"
       >
       </dropdown>
    <dropdown
           type="ellipsis"
           data="{{data}}"
       >
       </dropdown>
   </module>    
</page>

export default XPage({
   data: {
        data:[
                { label: '命令1', value: '1', disabled: true,icon: 'x-icon-action-copy', },
                { label: '命令2', value: '2',icon: 'x-icon-action-copy', },
                { label: '命令3', value: '3',icon: 'x-icon-action-copy', },
                { label: '命令4', value: '4', divided: true ,icon: 'x-icon-action-copy',},
            ]
   },
   show() {},
});


点击事件​

PCPhonePad
<page>
 <module title="点击事件" height="100px">
    <dropdown
           text="按钮"
           type="button"
           data="{{data}}"
           bind-click="clickHandler"
           bind-command="commandHandler"
       >
       </dropdown>
       <dropdown
           text="超链"
           type="link"               
           data="{{data}}"
       >
       </dropdown>
       <dropdown
           type="ellipsis"     
           data="{{data}}"
       >
       </dropdown>
       <dropdown
           text="自定义"
           data="{{data}}"
       >
       <button status="secondary" text="自定义按钮" icon="x-icon-action-copy" />
       </dropdown>
   </module>    
</page>

export default XPage({
   data: {
        data:[
                { label: '命令1', value: '1', disabled: true,tips:'提示' },
                { label: '命令2', value: '2',tips:'提示' },
                { label: '命令3', value: '3' },
                { label: '命令4', value: '4', divided: true },
            ]
   },
   show() {},
   clickHandler(){
       console.info('触发按钮被点击了')
   },
   commandHandler(e,a,c){
       console.info('comand被触发', command);
   },
});


Attributes​

属性说明类型可选值默认值端版本
type类型Stringbutton/link/ellipsisbuttonPC/Mobile--
text名称String----PC/Mobile--
trigger触发方式Stringclick/hover(Mobile不支持hover)clickPC/Mobile--
icon左侧图标String----PC/Mobile--
data菜单项Array<{ label: String, value: any, disabled: Boolean, tips: String}>----PC/Mobile--
disabledtrigger按钮是否禁用Boolean--falsePC/Mobile--
splitButtontrigger的按钮是否和向下icon(操作区)分开，type为button和link时有效Boolean--falsePC--

Attributes - type​

触发的按钮类型可选值说明如下

属性说明端版本
button按钮PC/Mobile--
link超链接PC/Mobile--
ellipsis省略号PC/Mobile--

Attributes - data​

菜单项数据支持的配置说明如下

属性说明类型可选值默认值端版本
label展示文案String----PC/Mobile--
value值Any----PC/Mobile--
disabled禁用Boolean----PC/Mobile--
divided分割线Boolean----PC--
tips提示String----Mobile--

Events​

名称说明回调参数端版本
click点击按钮回调--PC/Mobile--
command点击菜单项回调Object < 操作的菜单项的全部数据 >PC/Mobile--