华玥组件库

中文

English

中文

English

Appearance

Dropdown 下拉菜单组件 ​

下拉菜单组件，用于展示筛选条件或选择操作，支持多级菜单选择。

📌平台差异说明 ​

APP(vue)H5微信小程序支付宝小程序
✔✔✔✔

⚠️注意事项 ​

注意事项

  • 该组件必须结合 hy-dropdown 和 hy-dropdown-item 一起使用
  • hy-dropdown-item 必须嵌套在 hy-dropdown 内部使用
  • 通过 v-model 双向绑定选中项的 value 值
  • menus 属性传入的数组项必须包含 label 和 value 字段
  • 点击某个菜单项会自动关闭其他已展开的菜单

🏯基本使用示例 ​

基础用法 ​

html
<template>
    <hy-dropdown>
        <hy-dropdown-item
            title="全部"
            :menus="options1"
            v-model="value1"
            @change="handleChange"
        ></hy-dropdown-item>
        <hy-dropdown-item
            title="国漫"
            :menus="options_2"
            v-model="value_2"
            @change="handleChange"
        ></hy-dropdown-item>
        <hy-dropdown-item
            title="国家"
            :menus="options_3"
            v-model="value_3"
            @change="handleChange"
        ></hy-dropdown-item>
    </hy-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref()
const value_2 = ref()
const value_3 = ref()

const options1 = ref([
    { label: '全部商品', value: 1 },
    { label: '折扣商品', value: 2 },
    { label: '团购商品', value: 3 }
])

const options_2 = ref([
    { label: '西行记', value: 1 },
    { label: '斗破苍穹', value: 2 },
    { label: '吞噬星空', value: 3 },
    { label: '斗罗大陆', value: 4 },
    { label: '偷心九月天', value: 5 }
])

const options_3 = ref([
    { label: '中国', value: 1 },
    { label: '日本', value: 2 },
    { label: '韩国', value: 3 },
    { label: '美国', value: 4 }
])

const handleChange = (item, index) => {
    console.log('选中:', item.label, '索引:', index)
}
</script>

自定义颜色 ​

html
<template>
    <hy-dropdown activeColor="#4F8EF7" inactiveColor="#999999">
        <hy-dropdown-item
            title="分类"
            :menus="options"
            v-model="value"
        ></hy-dropdown-item>
    </hy-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const options = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 }
])
</script>

自定义菜单高度和字体大小 ​

html
<template>
    <hy-dropdown :height="50" titleSize="18">
        <hy-dropdown-item
            title="菜单"
            :menus="options"
            v-model="value"
        ></hy-dropdown-item>
    </hy-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const options = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 }
])
</script>

禁用某一项 ​

html
<template>
    <hy-dropdown>
        <hy-dropdown-item
            title="可选菜单"
            :menus="options"
            v-model="value"
        ></hy-dropdown-item>
        <hy-dropdown-item
            title="禁用菜单"
            :menus="options"
            v-model="disabledValue"
            disabled
        ></hy-dropdown-item>
    </hy-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const disabledValue = ref()
const options = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 }
])
</script>

显示下边框 ​

html
<template>
    <hy-dropdown borderBottom>
        <hy-dropdown-item
            title="菜单"
            :menus="options"
            v-model="value"
        ></hy-dropdown-item>
    </hy-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const options = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 }
])
</script>

自定义图标 ​

html
<template>
    <hy-dropdown menuIcon="arrow-up" :menuIconSize="16">
        <hy-dropdown-item
            title="菜单"
            :menus="options"
            v-model="value"
        ></hy-dropdown-item>
    </hy-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const options = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 }
])
</script>

API ​

参数说明类型默认值
height标题菜单的高度，单位pxstring|number40
borderBottom标题菜单是否显示下边框booleanfalse
sticky是否固定定位booleantrue
activeColor标题和选项卡选中的颜色string-
inactiveColor标题和选项卡未选中的颜色string#606266
menuIcon标题菜单右侧的图标名称stringARROW_DOWN_FILL
menuIconSize标题菜单右侧图标的大小，单位pxstring|number14
customStyle自定义需要用到的外部样式CSSProperties-
参数说明类型默认值
v-model双向绑定选中项的value值string|number-
title菜单项标题string-
menus选项数据array[]
disabled是否禁用点击booleanfalse

Events ​

事件名说明回调参数
change点击某个选项时触发item: DropdownMenuItem, index: number

Slots ​

插槽名说明接收值
default下拉菜单项内容-
插槽名说明接收值
default自定义菜单项内容-

Typings ​

类型说明
ts
export interface DropdownMenuItem {
    /** 展示标题 */
    label: string
    /** 值 */
    value: string | number
}
13:35