向下弹出的列表。
何时使用
当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。
演示
代码
<dropdown title="你好 点击我试试">
<dropdown-item closeAfterClick>
<a href="#" class="dropdown-item">新建文章</a>
</dropdown-item>
<dropdown-item>
<a href="#" class="dropdown-item">我的专栏</a>
</dropdown-item>
<dropdown-item>
<a href="#" class="dropdown-item">编辑资料</a>
</dropdown-item>
<dropdown-item closeAfterClick>
<a href="#" class="dropdown-item">退出登陆</a>
</dropdown-item>
</dropdown>
Dropdown 属性和事件
| 属性或事件 | 类型 | 默认 | 说明 |
|---|---|---|---|
| title | string | - | Dropdown 中的标题文本 |
| item-clicked | 事件 | - | 回调参数 (event) => void |
DropdownItem 属性和事件
| 属性或事件 | 类型 | 默认 | 说明 |
|---|---|---|---|
| disabled | boolean | false | 禁用 Dropdown Item |
| closeAfterClick | boolean | false | 点击 Item 以后是否关闭菜单 |