Dropdown 下拉菜单

页面上的操作命令过多时，用此组件可以收纳操作元素。

基本用法

默认下拉菜单，鼠标移入则显示下拉菜单。

<template>
  <ImDropdown>
    <ImButton>鼠标移入试试</ImButton>
    <template #content>
      <ImList>
        <ImListItem :value="item" v-for="item in list">{{ item }}</ImListItem>
      </ImList>
    </template>
  </ImDropdown>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref('1');
const list = ['三国演义', '水浒传', '西游记', '红楼梦'];
</script>

触发方式

通过设置 trigger 属性来定义触发下拉菜单的行为，默认为 hover。

出现位置

通过设置 placement 属性来设置下拉菜单出现的位置。默认为 bottom-left。

支持选中

下拉菜单支持选择模式，只需要设置 v-model 和对应的 value 即可。

<template>
  <ImDropdown>
    <ImButton width="120px">支持选择 {{ selected }}</ImButton>
    <template #content>
      <ImList v-model="selected">
        <ImListItem :value="String(item)" v-for="item in 3"
          >Menu Item Index {{ item }}</ImListItem
        >
      </ImList>
    </template>
  </ImDropdown>
</template>
<script setup>
import { ref } from 'vue';

const selected = ref('1');
</script>

箭头

通过设置 arrow 属性来控制是否显示下拉菜单的箭头。默认为 true。

<template>
  <ImDropdown arrow style="margin-right:8px;">
    <ImButton color="primary">有箭头</ImButton>
    <template #content>
      <ImList>
        <ImListItem :value="item" v-for="item in list">{{ item }}</ImListItem>
      </ImList>
    </template>
  </ImDropdown>

  <ImDropdown :arrow="false">
    <ImButton color="primary">无箭头</ImButton>
    <template #content>
      <ImList>
        <ImListItem :value="item" v-for="item in list">{{ item }}</ImListItem>
      </ImList>
    </template>
  </ImDropdown>
</template>

滚动关闭

设置 scrollClose 属性为 true,即可实现

<template>
  <ImDropdown trigger="click" scrollClose>
    <ImButton color="primary">试试吧</ImButton>
    <template #content>
      <ImList>
        <ImListItem :value="item" v-for="item in list">{{ item }}</ImListItem>
      </ImList>
    </template>
  </ImDropdown>
</template>

API

Dropdown Props

属性	说明
placement	下拉菜单出现的位置
arrow	是否显示下拉菜单的箭头，默认为 true。
scrollClose	是否在滚动时关闭下拉菜单，默认为 false。
trigger	触发下拉菜单的方式，可选值为 click、hover。默认为 hover。
v-model	绑定值，用于支持选择模式。
zIndex	显示层级
offset	偏移量