DropdownMenu 下拉菜单

介绍

下拉菜单是一种常见的交互组件，用于显示一组选项供用户选择。它通常用于筛选数据、排序选项等场景。

导入

import DropdownMenu from '@/components/feedback/DropdownMenu.vue'
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue'

用法

基础用法

基本的下拉菜单使用方式，包含多个可选择的条目。

vue

<template>
  <DropdownMenu>
    <DropdownMenuItem 
      v-model="value1"
      :options="[
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ]"
      type="single-check"
    />
    <DropdownMenuItem 
      v-model="value2"
      :options="[
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }, 
      ]"
      type="single-check"
    />
  </DropdownMenu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DropdownMenu from '@/components/feedback/DropdownMenu.vue'
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue'

const value1 = ref(0)
const value2 = ref('a')
</script>

自定义内容

可以自定义下拉菜单的内容，例如添加复选框等复杂交互元素。

vue

<template>
  <DropdownMenu ref="dropdownMenu1">
    <DropdownMenuItem title="筛选">
      <Cell title="热门推荐" touchable>
        <template #value>
          <CheckBox v-model="value3"></CheckBox>
        </template>
      </Cell>
      <Cell title="促销产品" touchable>
        <template #value>
          <CheckBox v-model="value4"></CheckBox>
        </template>
      </Cell>
      <FlexCol :padding="10">
        <Button type="primary" @click="dropdownMenu1?.close()">确定</Button>
      </FlexCol>
    </DropdownMenuItem>
    <DropdownMenuItem 
      v-model="value2"
      :options="[
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }, 
      ]"
      type="single-check"
    />
    <template #extra>
      <DropdownMenuItem 
        v-model="value5"
        title="品牌"
        :options="[
          {text: 'Haier', value: 'haier'},
          {text: '卡萨帝', value: 'casarte'},
          {text: 'Leader', value: 'leader'},
        ]"
        type="mulit-check"
      />
      <DropdownMenuItem v-model="value3" title="热门" type="toggle" />
      <DropdownMenuItem v-model="value4" title="促销" type="toggle" />
    </template>
  </DropdownMenu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DropdownMenu from '@/components/feedback/DropdownMenu.vue'
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue'
import CheckBox from '@/components/form/CheckBox.vue'
import Cell from '@/components/basic/Cell.vue'
import FlexCol from '@/components/layout/FlexCol.vue'
import Button from '@/components/basic/Button.vue'

const dropdownMenu1 = ref()
const value2 = ref('a')
const value3 = ref(false)
const value4 = ref(false)
const value5 = ref<string[]>([])
</script>

自定义选中主色

可以通过 activeColor 属性自定义选中状态的颜色。

vue

<template>
  <DropdownMenu activeColor="danger">
    <DropdownMenuItem 
      v-model="value1"
      :options="[
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ]"
      type="single-check"
    />
    <DropdownMenuItem 
      v-model="value2"
      :options="[
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }, 
      ]"
      type="single-check"
    />
  </DropdownMenu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DropdownMenu from '@/components/feedback/DropdownMenu.vue'
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue'

const value1 = ref(0)
const value2 = ref('a')
</script>

向上展开

可以通过 direction 属性设置下拉菜单向上展开。

vue

<template>
  <DropdownMenu direction="up">
    <DropdownMenuItem 
      v-model="value1"
      :options="[
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ]"
      type="single-check"
    />
    <DropdownMenuItem 
      v-model="value2"
      :options="[
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }, 
      ]"
      type="single-check"
    />
  </DropdownMenu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DropdownMenu from '@/components/feedback/DropdownMenu.vue'
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue'

const value1 = ref(0)
const value2 = ref('a')
</script>

禁用条目

可以通过 disabled 属性禁用某个下拉菜单项。

vue

<template>
  <DropdownMenu>
    <DropdownMenuItem 
      v-model="value1"
      disabled
      :options="[
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ]"
      type="single-check"
    />
    <DropdownMenuItem 
      v-model="value2"
      :options="[
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }, 
      ]"
      type="single-check"
    />
  </DropdownMenu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DropdownMenu from '@/components/feedback/DropdownMenu.vue'
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue'

const value1 = ref(0)
const value2 = ref('a')
</script>

API 参考

DropdownMenu

下拉菜单容器组件。

Props

名称	说明	类型	必填	默认值
activeColor	菜单标题和选项的选中态颜色	`string`	-	`'primary'`
backgroundColor	背景颜色	`string`	-	`'white'`
itemStyle	菜单选项的样式	`ViewStyle`	-	-
itemExtraStyle	菜单额外选项的样式	`ViewStyle`	-	-
direction	菜单的方向	`'up' \| 'down'`	-	`'down'`
duration	动画时长，单位ms，设置为 0 可以禁用动画	`number`	-	`300`

Slots

名称	说明
default	下拉菜单项的内容
extra	额外的下拉菜单项，会显示在滚动区域

Methods

名称	说明
close	关闭所有打开的下拉菜单

DropdownMenuItem

下拉菜单的单个条目组件。

Props

名称	说明	类型	必填	默认值
modelValue	选中的值	`string \| number \| boolean \| undefined \| (string \| number)[]`	-	-
title	条目标题文字	`string`	-	-
icon	条目左侧图标名称或图片链接，等同于 Icon 组件的 icon 属性	`string`	-	-
disabled	是否禁用	`boolean`	-	`false`
options	选项。如果为空，且传入boolean则为开关，否则点击条目，其他属性为下拉菜单	`DropdownMenuItem[]`	-	-
type	类型	`'button' \| 'toggle' \| 'single-check' \| 'mulit-check'`	-	`'single-check'`
activated	设置条目激活状态的方式 - default: 默认使用 modelValue 计算状态，不为空数组或者不为第一条数据则激活 - none: 没有激活状态 - true/false：手动设置激活状态	`boolean \| 'default' \| 'none'`	-	`'default'`

Slots

名称	说明
default	下拉菜单的内容，当没有设置 options 时显示
icon	条目左侧的图标
title	条目的标题文本
arrow	右侧的箭头图标

Events

名称	说明	参数
update:modelValue	选中值变化时触发	`value: string \| number \| boolean \| (string \| number)[]`
click	当类型为 button 时，点击触发	`$event`

Methods

名称	说明
close	关闭当前下拉菜单
open	打开当前下拉菜单
toggle	切换当前下拉菜单的显示状态

主题变量

名称	类型	默认值	说明
DropdownMenuActiveColor	string	`primary`	选中状态的颜色
DropdownMenuBackgroundColor	string	`white`	背景颜色
DropdownMenuItemTextMargin	number	`6`	文本边距
DropdownMenuItemIconSize	number	`25`	图标大小
DropdownMenuItemVerticalPadding	number	`20`	垂直内边距
DropdownMenuItemHorizontalPadding	number	`0`	水平内边距
DropdownMenuItemExtraBorderStyle	string	`solid`	额外菜单项的边框样式
DropdownMenuItemExtraBorderWidth	number	`2`	额外菜单项的边框宽度
DropdownMenuItemExtraBorderColor	string	`transparent`	额外菜单项的边框颜色
DropdownMenuItemExtraRadius	number	`40`	额外菜单项的圆角大小
DropdownMenuItemExtraMarginRight	number	`10`	额外菜单项的右外边距
DropdownMenuItemExtraVerticalPadding	number	`2`	额外菜单项的垂直内边距
DropdownMenuItemExtraHorizontalPadding	number	`10`	额外菜单项的水平内边距

DropdownMenu 下拉菜单 ​

介绍 ​

导入 ​

用法 ​

基础用法 ​

自定义内容 ​

自定义选中主色 ​

向上展开 ​

禁用条目 ​

API 参考 ​

DropdownMenu ​

Props ​

Slots ​

Methods ​

DropdownMenuItem ​

Props ​

Slots ​

Events ​

Methods ​

主题变量 ​

DropdownMenu 下拉菜单

介绍

导入

用法

基础用法

自定义内容

自定义选中主色

向上展开

禁用条目

API 参考

DropdownMenu

Props

Slots

Methods

DropdownMenuItem

Props

Slots

Events

Methods

主题变量