Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

悬停在下拉菜单上以展开更多操作。

<template>
    <Dropdown :menuOptions="menu_options">
        <Button>普通下拉菜单</Button>
    </Dropdown>
</template>
<script setup>
import { reactive } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'

const menu_options = reactive([
    {
        key: 1,
        label: 'item-1'
    },
    {
        key: 2,
        label: 'item-2',
        disabled: true,
        divided: true
    },
    {
        key: 3,
        label: 'item-3'
    },
    {
        key: 4,
        label: 'item-4'
    }
])
</script>

触发方式

可以配置点击激活或者悬停激活。

将 trigger 属性设置为 click 即可， 默认为 hover。

<template>
    <Dropdown :menuOptions="menu_options">
        <Button>Hover</Button>
    </Dropdown>

    <Dropdown :menuOptions="menu_options" trigger="click">
        <Button>Click</Button>
    </Dropdown>
</template>
<script setup>
import { reactive } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'

const menu_options = reactive([
    {
        key: 1,
        label: 'item-1'
    },
    {
        key: 2,
        label: 'item-2',
        disabled: true,
        divided: true
    },
    {
        key: 3,
        label: 'item-3'
    },
    {
        key: 4,
        label: 'item-4'
    }
])
</script>
<style scoped>
.vh-button {
    margin-right: 10px;
}
</style>

自定义内容

可通过 h 进行内容自定义

<template>
    <Dropdown :menuOptions="menu_options">
        <Button>Hover</Button>
    </Dropdown>
</template>
<script setup>
import { reactive, h } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'

const menu_options = reactive([
    {
        key: 1,
        label: 'item-1'
    },
    {
        key: 2,
        label: 'item-2',
        disabled: true,
        divided: true
    },
    {
        key: 3,
        label: h('b', 'item-3')
    },
    {
        key: 4,
        label: 'item-4'
    }
])
</script>

事件触发监听

通过 select 事件监听 即可知道点击哪一项

<template>
    <Dropdown :menuOptions="menu_options" @select="select">
        <Button>Hover</Button>
    </Dropdown>
</template>
<script setup>
import { reactive, h } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'
import { createMessage } from '@/components/Message/method'


const menu_options = reactive([
    {
        key: 1,
        label: 'item-1'
    },
    {
        key: 2,
        label: 'item-2',
        disabled: true,
        divided: true
    },
    {
        key: 3,
        label: h('b', 'item-3')
    },
    {
        key: 4,
        label: 'item-4'
    }
])

const select = (item) => {
    createMessage({ message: item.key, duration: 0, type: 'success', showClose: true })
}
</script>

手动打开关闭

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单。

<template>
    <Dropdown 
      :menuOptions="menu_options"  
      trigger="click"
      manual
      ref="dropdownRef"
    >
        <Button>菜单容器</Button>
    </Dropdown>
    <br/>
    <br/>
    <br/>
    <Button type="primary" @click="show">点击手动触发显示</Button>
    <Button type="dangger" @click="hidden">点击手动触发隐藏</Button>
</template>
<script setup>
import { reactive, h, ref } from 'vue'
import Dropdown from '@/components/Dropdown/Dropdown.vue'
import Button from '@/components/Button/Button.vue'

const dropdownRef = ref(null)
const menu_options = reactive([
    {
        key: 1,
        label: 'item-1'
    },
    {
        key: 2,
        label: 'item-2',
        disabled: true,
        divided: true
    },
    {
        key: 3,
        label: h('b', 'item-3')
    },
    {
        key: 4,
        label: 'item-4'
    }
])

const show = () => {
    dropdownRef.value.show()
}

const hidden = () => {
    dropdownRef.value.hide()
}

</script>

参数

属性名	说明	类型	默认值
trigger	触发的时机	click| hover	hover
manual	是否为手动触发	boolean	false
menuOptions	菜单选项	array

事件

属性名	说明	参数
select	点击选项时触发	选项