iDesign

Dropdown 下拉菜单

基于指定节点的折叠下拉菜单。

基本用法

通过 options 属性指定下拉列表内容，并通过 @click 指定点击下拉内容触发事件。

<template>
  <i-dropdown :options="options" @click="handleSelect">
    <i-button>更多</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2
  },
  {
    content: '操作三',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

单项不同高度

可通过 size 属性指定下拉菜单单项的高度，默认为 medium。

<template>
  <div className="idesign-demo-block-row">
    <i-dropdown size="small" :options="options" @click="handleSelect">
      <i-button>small</i-button>
    </i-dropdown>
    <i-dropdown size="medium" :options="options" @click="handleSelect">
      <i-button>medium</i-button>
    </i-dropdown>
    <i-dropdown size="large" :options="options" @click="handleSelect">
      <i-button>large</i-button>
    </i-dropdown>
  </div>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2
  },
  {
    content: '操作三',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

限制最大高度

可通过 maxHeight 属性指定下拉列表最大高度，注意最外层设最大高度后无法使用级联。

<template>
  <i-dropdown :options="options" :maxHeight="300" @click="handleSelect">
    <i-button>限制最大高度</i-button>
  </i-dropdown>
</template>

<script setup>
const options = Array(24).fill({
  content: '操作项',
  value: Math.random()
})

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

全局禁用状态

可通过 disabled 属性控制禁用整个下拉菜单。

<template>
  <i-dropdown :options="options" :disabled="true" @click="handleSelect">
    <i-button>禁用下拉菜单</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2
  },
  {
    content: '操作三',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

单项禁用状态

也可在 options 属性中设置 disabled 控制单项禁用。

<template>
  <i-dropdown :options="options" @click="handleSelect">
    <i-button>禁用操作二</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2,
    disabled: true
  },
  {
    content: '操作三',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

带分割线的下拉项

可在 options 属性中设置 divider 控制该项下方展示分割线。

<template>
  <i-dropdown :options="options" @click="handleSelect">
    <i-button>带分割线的下拉菜单</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2,
    divider: true
  },
  {
    content: '操作三',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

带分组标题的下拉项

可在 options 属性中设置 title 控制该项上方展示组标题。

<template>
  <i-dropdown :options="options" @click="handleSelect">
    <i-button>带分组标题的下拉项</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1,
    title: '分组 1'
  },
  {
    content: '操作二',
    value: 2,
    divider: true
  },
  {
    content: '操作三',
    value: 3,
    title: '分组 2'
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

单项点击事件

可在 options 属性中设置 onClick 控制该项点击触发事件。

<template>
  <i-dropdown :options="options">
    <i-button>点击操作二触发</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2,
    onClick: (item, e) => {
      console.log(item, e)
    }
  },
  {
    content: '操作三',
    value: 3
  }
]
</script>
显示代码

不同触发方式

可通过 trigger 属性指定下拉菜单触发方式，默认为 click。

<template>
  <div className="idesign-demo-block-row">
    <i-dropdown trigger="click" :options="options" @click="handleSelect">
      <i-button>点击触发</i-button>
    </i-dropdown>
    <i-dropdown trigger="hover" :options="options" @click="handleSelect">
      <i-button>悬浮触发</i-button>
    </i-dropdown>
    <i-dropdown trigger="context-menu" :options="options" @click="handleSelect">
      <i-button>右击触发</i-button>
    </i-dropdown>
  </div>
</template>

<script setup>
const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2
  },
  {
    content: '操作三',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码

可选中模式

可以通过指定 value 选中值将下拉菜单切换为可选中的模式。

<template>
  <div className="idesign-demo-block-row">
    <i-dropdown :value="currentValue" :options="options" @click="handleSelect">
      <i-button>可选中</i-button>
    </i-dropdown>
    <i-dropdown :value="currentValue" :options="options" @click="handleSelect">
      <i-button>同步对照组</i-button>
    </i-dropdown>
  </div>
</template>

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

const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2
  },
  {
    content: '操作三',
    value: 3
  }
]

const currentValue = ref(2)

const handleSelect = (val) => {
  console.log(val)
  currentValue.value = val
}
</script>
显示代码

下拉多选模式

可通过 multiple 属性指定下拉菜单为多选模式。

<template>
  <div className="idesign-demo-block-row">
    <i-dropdown
      :value="currentValue"
      :options="options"
      :multiple="true"
      @click="handleSelect"
    >
      <i-button>多选菜单</i-button>
    </i-dropdown>
    <i-dropdown
      :value="currentValue"
      :options="options"
      :multiple="true"
      @click="handleSelect"
    >
      <i-button>同步对照组</i-button>
    </i-dropdown>
  </div>
</template>

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

const options = [
  {
    content: '操作一',
    value: 1
  },
  {
    content: '操作二',
    value: 2
  },
  {
    content: '操作三',
    value: 3
  }
]

const currentValue = ref([2])

const handleSelect = (val, e) => {
  console.log(val, e)
  currentValue.value = val
}
</script>
显示代码

级联下拉菜单

可通过 children 属性指定级联菜单，可通过 cascaderDirection 控制展开方向。

<template>
  <div className="idesign-demo-block-row">
    <i-dropdown
      :options="options"
      :value="singleVal"
      @click="handleSingleSelect"
    >
      <i-button>级联单选菜单</i-button>
    </i-dropdown>

    <i-dropdown
      :options="options"
      :value="multiVal"
      :multiple="true"
      @click="handleMultiSelect"
    >
      <i-button>级联多选菜单</i-button>
    </i-dropdown>

    <i-dropdown
      :options="options"
      cascaderDirection="left"
      @click="handleSingleSelect"
    >
      <i-button>向左展开的级联单选菜单</i-button>
    </i-dropdown>

    <i-dropdown
      :options="options"
      :value="multiVal"
      cascaderDirection="left"
      :multiple="true"
      @click="handleMultiSelect"
    >
      <i-button>向左展开的级联多选菜单</i-button>
    </i-dropdown>
  </div>
</template>

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

const options = [
  {
    content: '操作 1',
    value: 1
  },
  {
    content: '操作 2',
    value: 2,
    children: [
      {
        content: '操作 2-1',
        value: 2.1
      },
      {
        content: '操作 2-2',
        value: 2.2,
        children: [
          {
            content: '操作 2-2-1',
            value: 2.21
          },
          {
            content: '操作 2-2-2',
            value: 2.22
          },
          {
            content: '操作 2-2-3',
            value: 2.23
          }
        ]
      },
      {
        content: '操作 2-3',
        value: 2.3
      }
    ]
  },
  {
    content: '操作 3',
    value: 3
  }
]

const singleVal = ref([])
const multiVal = ref([])

const handleMultiSelect = (val) => {
  console.log(val)
  multiVal.value = val
}
const handleSingleSelect = (val) => {
  console.log(val)
  singleVal.value = val
}
</script>
显示代码

限制级联子项最大高度

可通过 maxHeight 属性指定级联子项的最大高度，注意只能给最里层设最大高度。

<template>
  <i-dropdown :options="options" @click="handleSelect">
    <i-button>限制级联子项高度</i-button>
  </i-dropdown>
</template>

<script setup>
const options = [
  {
    content: '操作 1',
    value: 1
  },
  {
    content: '操作 2',
    value: 2,
    maxHeight: 300,
    children: Array(24).fill({
      content: '操作项',
      value: Math.random()
    })
  },
  {
    content: '操作 3',
    value: 3
  }
]

const handleSelect = (val) => {
  console.log(val)
}
</script>
显示代码
属性说明类型默认值
contentClassName下拉内容类名string--
width下拉列表宽度string〡number--
maxHeight列表项最大高度string〡number--
size下拉项高度"small"〡"medium"〡"large"medium
value下拉选中项string〡number〡(string〡number)[]--
options下拉操作项DropdownOption[][]
placement菜单触发位置"top"〡"left"〡"right"〡"bottom"〡"top-left"〡"top-right"〡"bottom-left"〡"bottom-right"〡"left-top"〡"left-bottom"〡"right-top"〡"right-bottom"bottom
trigger菜单触发方式"hover"〡"click"〡"context-menu"click
multiple是否可多选booleanfalse
cascaderDirection级联子层级展开方向"left"〡"right"right
disabled是否全局禁用booleanfalse
属性说明类型默认值
click点击菜单项触发事件`(value: stringnumber
trigger切换下拉操作时触发(visible: boolean) => void--
属性说明类型默认值
content下拉操作项内容ReactNode--
value下拉操作项唯一标识string〡number--
width宽度number--
maxHeight最大高度number--
disabled单项是否禁用booleanfalse
sameWidth气泡是否与触发节点等宽booleanfalse
divider是否显示操作项之后的分隔线booleanfalse
title该下拉项上方组标题string--
属性说明类型默认值
click点击时触发(dropdownItem: DropdownOption, event: MouseEvent) => void--
Last Updated:
Contributors: Leophen