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 按钮 。