Dropdown下拉菜单

110 阅读1分钟

向下弹出的列表。

何时使用

当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

演示

你好 点击我试试

代码

  
      <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 属性和事件

属性或事件类型默认说明
titlestring-Dropdown 中的标题文本
item-clicked事件-回调参数 (event) => void

DropdownItem 属性和事件

属性或事件类型默认说明
disabledbooleanfalse禁用 Dropdown Item
closeAfterClickbooleanfalse点击 Item 以后是否关闭菜单