DropDown 下拉菜单

页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。

基本用法

基础下拉菜单。你也可以配置 disabled 属性来禁用他。

<template>
  <div class="box">
    <sb-drop-down style="margin-right:20px">
      <template #title> 悬停展开 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
    <sb-drop-down disabled>
      <template #title> 禁止展开 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
  </div>
</template>

触发方式

你可以通过 trigger 指定触发方式。触发方式有 hover, click, contextmenu 三种。你也可以使用 handleShowMenu 和 handleCloseMenu 两个方法来展开/收起下拉菜单

<template>
  <div class="box">
    <sb-drop-down trigger="click" style="margin-right:20px">
      <template #title> 点击展开 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
    <sb-drop-down trigger="contextmenu" style="margin-right:20px">
      <template #title> 右键展开 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
    <sb-drop-down trigger="click" ref="me" style="margin-right:20px">
      <template #title> 事件展开 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
    <sb-button @click="testopen" style="margin-right:20px">点击展开</sb-button>
    <sb-button @click="testclose">点击关闭</sb-button>
    
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const me = ref(null);
const testopen = () => {
  me.value && (me.value as any).handleShowMenu();
};
const testclose = () => {
  me.value && (me.value as any).handleCloseMenu();
};
</script>

下拉框高度

配置 maxHeight 属性可以限定展开显示的下来框的最大高度。

<template>
  <div class="box">
    <sb-drop-down :maxHeight="50" trigger="click">
      <template #title> 最高50px </template>
      <template #dropdown>
        <sb-drop-down-menu title="菜单组1">
          <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
          <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
          <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
          <sb-drop-down-item value="4">菜单3</sb-drop-down-item>
          <sb-drop-down-item value="5">菜单3</sb-drop-down-item>
        </sb-drop-down-menu>
      </template>
    </sb-drop-down>
  </div>
</template>

选择项和点击事件

菜单项的值通过配置 value 属性设定，绑定 handleItemClick 事件可以接收被点击的属性。

选中了：3

<template>
  <div class="box">
    <sb-drop-down @handleItemClick="test" trigger="click">
      <template #title> 点击选中 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
    <div>选中了：{{ value }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const value = ref("3");
const test = (clickValue: any) => {
  value.value = clickValue;
};
</script>

关闭下拉框

默认点击菜单项后关闭下拉菜单，通过配置 autoClose 属性可以设定下拉框在项目点击之后是不是关闭

<template>
  <div class="box">
    <sb-drop-down @handleItemClick="test" :autoClose="false" trigger="click">
      <template #title> 选中不关闭 </template>
      <template #dropdown>
        <sb-drop-down-item value="1">菜单1</sb-drop-down-item>
        <sb-drop-down-item value="2">菜单2</sb-drop-down-item>
        <sb-drop-down-item value="3">菜单3</sb-drop-down-item>
      </template>
    </sb-drop-down>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const value = ref("3");
const test = (clickValue: any) => {
  value.value = clickValue;
};
</script>

菜单分组

通过 drop-down-menu 组件，可以下拉菜单的菜单项分为几个组。

<template>
  <div class="box">
    <sb-drop-down :maxHeight="200">
      <template #title> 分组菜单 </template>
      <template #dropdown>
        <sb-drop-down-menu title="菜单组1">
          <sb-drop-down-item value="11">菜单1-1</sb-drop-down-item>
          <sb-drop-down-item value="12">菜单1-2</sb-drop-down-item>
          <sb-drop-down-item value="13">菜单1-3</sb-drop-down-item>
          <sb-drop-down-item value="14">菜单1-4</sb-drop-down-item>
          <sb-drop-down-item value="15">菜单1-5</sb-drop-down-item>
        </sb-drop-down-menu>
        <sb-drop-down-menu title="菜单组2">
          <sb-drop-down-item value="21">菜单2-1</sb-drop-down-item>
          <sb-drop-down-item value="22">菜单2-2</sb-drop-down-item>
          <sb-drop-down-item value="23">菜单2-3</sb-drop-down-item>
          <sb-drop-down-item value="24">菜单2-4</sb-drop-down-item>
          <sb-drop-down-item value="25">菜单2-5</sb-drop-down-item>
        </sb-drop-down-menu>
      </template>
    </sb-drop-down>
  </div>
</template>

菜单项配置

在菜单项 drop-down-item 组件，你可以配置 disabled 属性使某一项禁用，或者配置 divided 属性让某一项与其上方的项目分隔

<template>
  <div class="box">
    <sb-drop-down :maxHeight="200">
      <template #title> 菜单项配置 </template>
      <template #dropdown>
        <sb-drop-down-menu title="菜单组1">
          <sb-drop-down-item value="11" disabled>菜单1-1</sb-drop-down-item>
          <sb-drop-down-item value="12" divided>菜单1-2</sb-drop-down-item>
          <sb-drop-down-item value="13" divided>菜单1-3</sb-drop-down-item>
          <sb-drop-down-item value="14" divided>菜单1-4</sb-drop-down-item>
          <sb-drop-down-item value="15" divided>菜单1-5</sb-drop-down-item>
        </sb-drop-down-menu>
        <sb-drop-down-menu title="菜单组2">
          <sb-drop-down-item value="21">菜单2-1</sb-drop-down-item>
          <sb-drop-down-item value="22">菜单2-2</sb-drop-down-item>
          <sb-drop-down-item value="23">菜单2-3</sb-drop-down-item>
          <sb-drop-down-item value="24">菜单2-4</sb-drop-down-item>
          <sb-drop-down-item value="25">菜单2-5</sb-drop-down-item>
        </sb-drop-down-menu>
      </template>
    </sb-drop-down>
  </div>
</template>

API

`<drop-down>` Props

参数名	描述	类型	默认值
disabled	是否禁用	Boolean	false
autoClose	是否点击菜单项后关闭	Boolean	true
maxHeight	展开的最大高度	Number	false
trigger	展开的触发方式	'hover' \| 'click' \| 'contextmenu'	click

`<drop-down>` Events

事件名	描述	参数
handleItemClick	选中一个菜单项时触发	String

`<drop-down>` Slots

插槽名	描述	参数
title	菜单的显示内容	-
dropdown	菜单的下拉框中的内容	-

`<drop-down>` 全局方法

方法名	描述	参数
handleShowMenu	展开下拉菜单	-
handleCloseMenu	关闭下拉菜单	-

`<drop-down-menu>` Props

参数名	描述	类型	默认值
title	菜单组的标题	String	-

`<drop-down-menu>` Slots

插槽名	描述	参数
default	菜单组的内容	-

`<drop-down-item>` Props

参数名	描述	类型	默认值
disabled	是否禁用	Boolean	false
value	菜单项的唯一标识	String	-
divided	是否和上方使用分割线	Boolean	false

`<menu-item>` Slots

插槽名	描述	参数
default	菜单项的内容	-

DropDown 下拉菜单 #

基本用法 #

触发方式 #

下拉框高度 #

选择项和点击事件 #

关闭下拉框 #

菜单分组 #

菜单项配置 #

API #

<drop-down> Props #

<drop-down> Events #

<drop-down> Slots #

<drop-down> 全局方法 #

<drop-down-menu> Props #

<drop-down-menu> Slots #

<drop-down-item> Props #

<menu-item> Slots #