Skip to content
On this page

Dropdown 下拉菜单

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

基础用法

可通过options属性设置下拉菜单选项,options属性为Json数组,一般情况下至少保证有label字段。

下拉菜单
html
<script setup>
  import { ref } from 'vue'
  const list = ref([{
    command: 'a1',
    label: 'Action 1',
    disabled: true
  }, {
    command: 'a2',
    label: 'Action 2'
  }])
  const handleCommand = (item) => {
    alert(JSON.stringify(item))
  }
</script>

<os-dropdown
:data="list"
@command="handleCommand">
  下拉菜单 <i class="os-icon-down"></i>
</os-dropdown>

自定义模板

自定义模板可通过slot插槽方式完成。

下拉菜单
html
<os-dropdown
:data="list"
@command="handleCommand">
  下拉菜单 <i class="os-icon-down"></i>
  <template #dropdown="item">
    <div class="os-padding-xs">
      <os-tag>
      {{item.item.label}} ({{item.item.command}})
    </os-tag>
    </div>
  </template>
</os-dropdown>

按钮组样式

group属性能设置为按钮组样式,也可通过group-type设置按钮类型,具体参数可参考Button 按钮

Released under the MIT License.