Dropdown 下拉菜单

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

基础用法

移动到下拉菜单上，展开更多操作。

下拉菜单

<template>
  <Dropdwon trigger="click" :menuOptions="menuOptions">
    <span class="dropdown-link">
      下拉菜单<Icon class="icon-arrow-down" icon="caret-down" color="#409eff" />
    </span>
  </Dropdwon>
</template>

<script setup>
import Dropdwon from '@/components/Dropdown/Dropdown.vue'
import Icon from '@/components/Icon/Icon.vue'

const menuOptions = [
  {
    label: '黄金糕',
    value: '1'
  },
  {
    label: '狮子头',
    value: '2',
    disabled: true 
  },
  {
    label: '螺蛳粉',
    value: '3',
    divided: true
  },
  {
    label: '双皮奶',
    value: '4'
  },
  {
    label: '蚵仔煎'
  }
]
</script>

<style scoped>
.dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.icon-arrow-down {
  font-size: 12px;
  margin-left: 5px;
}
</style>

触发方式

可以配置 click 或者 hover 触发下拉菜单。

click触发

hover触发

<template>
  <Dropdwon trigger="click" :menuOptions="menuOptions" :open-delay="100" :close-delay="100">
    <span class="dropdown-link">
      click触发<Icon class="icon-arrow-down" icon="caret-down" color="#409eff" />
    </span>
  </Dropdwon>
  <Dropdwon trigger="hover" :menuOptions="menuOptions" :open-delay="100" :close-delay="100">
    <span class="dropdown-link">
      hover触发<Icon class="icon-arrow-down" icon="caret-down" color="#409eff" />
    </span>
  </Dropdwon>
</template>

<script setup>
import Dropdwon from '@/components/Dropdown/Dropdown.vue'
import Icon from '@/components/Icon/Icon.vue'
const menuOptions = [
  {
    label: '黄金糕',
    value: '1'
  },
  {
    label: '狮子头',
    value: '2',
    disabled: true
  },
  {
    label: '螺蛳粉',
    value: '3',
    divided: true
  },
  {
    label: '双皮奶',
    value: '4'
  },
  {
    label: '蚵仔煎'
  }
]
</script>

<style scoped>
.dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.icon-arrow-down {
  font-size: 12px;
  margin-left: 5px;
}
.s-dropdown {
  margin-right: 20px;
}
</style>

菜单隐藏方式

可以hide-after-click属性来配置。

下拉菜单

<template>
  <Dropdwon trigger="click" :menuOptions="menuOptions" :hide-after-click="false">
    <span class="dropdown-link">
      下拉菜单<Icon class="icon-arrow-down" icon="caret-down" color="#409eff" />
    </span>
  </Dropdwon>
</template>

<script setup>
import Dropdwon from '@/components/Dropdown/Dropdown.vue'
import Icon from '@/components/Icon/Icon.vue'

const menuOptions = [
  {
    label: '黄金糕',
    value: '1'
  },
  {
    label: '狮子头',
    value: '2',
  },
  {
    label: '螺蛳粉',
    value: '3',
  },
  {
    label: '双皮奶',
    value: '4'
  },
  {
    label: '蚵仔煎'
  }
]
</script>

<style scoped>
.dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.icon-arrow-down {
  font-size: 12px;
  margin-left: 5px;
}
</style>

Dropdown Attributes

参数	说明	类型	可选值	默认值
menu-options	下拉菜单选项	MenuOption[]	—	—
trigger	触发下拉的行为	String	hover / click	hover
placement	菜单弹出位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom-start
open-delay	展开下拉菜单的延时（仅在 trigger 为 hover 时有效）	Number	—	250
close-delay	收起下拉菜单的延时（仅在 trigger 为 hover 时有效）	Number	—	150
hide-after-click	是否在点击菜单项后隐藏菜单	Boolean	—	true

Dropdown Events

事件名称	说明	回调参数
select	点击菜单项触发的事件	event: MenuOption
visible-change	下拉框出现/隐藏时触发	visible: boolean

Dropdown Slot

名称	说明
—	触发下拉列表的内容

Dropdown MenuOption Attributes

参数	说明	类型	可选值	默认值
label	菜单项文字	String	—	—
key	菜单项的索引值，默认为数组索引值	Number	—	—
disabled	是否禁用菜单项	Boolean	—	false
divided	是否显示分隔线	Boolean	—	false