Dropdown 下拉菜单

向下弹出的列表。

何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

代码演示

基本

最简单的下拉菜单。

<template>                
    <v-dropdown :data="data">
        <a href="javascript:void(0)" class="ant-dropdown-link ant-dropdown-trigger">
            Hover me <v-icon type="down"></v-icon>
        </a>
    </v-dropdown>
</template>
<script>
export default {
    data:() => ({
        data: [
            {content: '1st item'},
            {content: '2nd item'},
            {content: '3rd item'},
        ],
    }),
}
</script>

其他元素

分割线和不可用菜单项。

<template>                
    <v-dropdown :data="data1">
        <a href="javascript:void(0)" class="ant-dropdown-link ant-dropdown-trigger">
            Hover me <v-icon type="down"></v-icon>
        </a>
    </v-dropdown>
</template>
<script>
export default {
    data:() => ({
        data1: [
            {content: '1st item'},
            {content: '2nd item'},
            {content: '3rd item', divided: true, disabled: true},
        ],
    }),
}
</script>

触发方式

默认是移入触发菜单，可以点击触发。

<template>                
    <v-dropdown :data="data" trigger="click">
        <a href="javascript:void(0)" class="ant-dropdown-link ant-dropdown-trigger">
            Click me <v-icon type="down"></v-icon>
        </a>
    </v-dropdown>
</template>
<script>
export default {
    data:() => ({
        data: [
            {content: '1st item'},
            {content: '2nd item'},
            {content: '3rd item'},
        ],
    }),
}
</script>

触发事件

点击菜单项后会触发事件。

<template>                
    <v-dropdown :data="data" @item-click="itemClick">
        <a href="javascript:void(0)" class="ant-dropdown-link ant-dropdown-trigger">
            Hover me <v-icon type="down"></v-icon>
        </a>
    </v-dropdown>
</template>
<script>
export default {
    data:() => ({
        data: [
            {content: '1st item'},
            {content: '2nd item'},
            {content: '3rd item'},
        ],
    }),
    methods: {
        itemClick(data) {
            console.log(data);
        }
    }
}
</script>

多级菜单

传入的菜单里有多个层级。

<template>                
    <v-dropdown :data="data2">
        <a href="javascript:void(0)" class="ant-dropdown-link ant-dropdown-trigger">
            Hover me <v-icon type="down"></v-icon>
        </a>
    </v-dropdown>
</template>
<script>
export default {
    data:() => ({
        data2: [
            {content: '1st item'},
            {content: '2nd item'},
            {
                content: 'sub',
                    children: [
                        {content: '3rd item'},
                        {content: '4th item'},
                    ],
                },
            },
        ],
    }),
}
</script>

API

Dropdown Props

Dropdown Events

Dropdown:Data Prop