ivyDesign

Appearance

Dropdown 下拉菜单 ​

常规用法 ​

下拉菜单选项一选项二选项三选项四
vue
<ivy-dropdown @command="handlerCommand">
    <ivy-button>下拉菜单</ivy-button>
    <ivy-dropdown-menu slot="dropdown">
        <ivy-dropdown-item command="option 1">选项一</ivy-dropdown-item>
        <ivy-dropdown-item command="option 2">选项二</ivy-dropdown-item>
        <ivy-dropdown-item command="option 3">选项三</ivy-dropdown-item>
        <ivy-dropdown-item command="option 4">选项四</ivy-dropdown-item>
    </ivy-dropdown-menu>
</ivy-dropdown>

分割线 ​

如果你想要在第三和第四个选项之间添加一个分隔符，你只需要在第三和第四个选项添加一个 <ivy-dropdown-item divided></ivy-dropdown-item> 即可。

下拉菜单选项一选项二选项三选项四
vue
<ivy-dropdown @command="handlerCommand">
    <ivy-button>下拉菜单</ivy-button>
    <ivy-dropdown-menu slot="dropdown">
        <ivy-dropdown-item command="option 1">选项一</ivy-dropdown-item>
        <ivy-dropdown-item command="option 2">选项二</ivy-dropdown-item>
        <ivy-dropdown-item command="option 3">选项三</ivy-dropdown-item>
        <ivy-dropdown-item divided></ivy-dropdown-item>
        <ivy-dropdown-item command="option 4">选项四</ivy-dropdown-item>
    </ivy-dropdown-menu>
</ivy-dropdown>

禁用某一项 ​

如果你想要在第三和第四个选项之间添加一个分隔符，你只需要在第三和第四个选项添加一个 <ivy-dropdown-item divided></ivy-dropdown-item> 即可。

下拉菜单选项一选项二选项三选项四
vue
<ivy-dropdown @command="handlerCommand">
    <ivy-button>下拉菜单</ivy-button>
    <ivy-dropdown-menu slot="dropdown">
        <ivy-dropdown-item command="option 1">选项一</ivy-dropdown-item>
        <ivy-dropdown-item command="option 2" disabled>选项二</ivy-dropdown-item>
        <ivy-dropdown-item command="option 3">选项三</ivy-dropdown-item>
        <ivy-dropdown-item command="option 4">选项四</ivy-dropdown-item>
    </ivy-dropdown-menu>
</ivy-dropdown>
事件说明
command点击菜单项的事件，通过 event.detail 获取点击项的标识
插槽名称说明
default触发下拉菜单的元素
dropdown下拉菜单
属性说明类型可选值默认值
command命令String--
disabled是否禁用Boolean-false
divided分割线Boolean-false