javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [el-dropdown]add handleOpen and handleClose methods (#5444)

Browse Source 
* feat(components): [el-dropdown]add handleOpen and handleClose methods

* feat(components): [el-dropdown]add handleOpen and handleClose methods

* feat(components): [el-dropdown]add handleOpen and handleClose methods
This commit is contained in:
Alan Wang
2022-01-19 15:04:44 +08:00
committed by GitHub
parent 68bbd0e79a
commit db41ec5d5e
5 changed files with 114 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/en-US/component/dropdown.md
View File

@@ -95,6 +95,16 @@ dropdown/command-event
:::
## Dropdown methods
You can open or close the dropdown menu by manually use `handleOpen` or `handleClose`
:::demo
dropdown/dropdown-methods
:::
## Sizes
Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
@@ -138,6 +148,13 @@ dropdown/sizes
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
## Dropdown Methods
| Method | Description | Parameters |
| ----------- | ----------------------- | ---------- |
| handleOpen | open the dropdown menu | — |
| handleClose | close the dropdown menu | — |
## Dropdown-Menu Slots
| Name | Description | Subtags |

48
docs/examples/dropdown/dropdown-methods.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div style="font-size: 14px">
<p>open(close) the Dropdown list2 will close(open) the Dropdown List1.</p>
</div>
<div style="margin: 15px">
<el-button @click="showClick">show</el-button>
</div>
<el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
<span class="el-dropdown-link"> Dropdown List1 </span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="contextmenu" @visible-change="handleVisible2">
<span class="el-dropdown-link"> Dropdown List2 </span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const dropdown1 = ref()
function handleVisible2(visible: any) {
if (visible) {
dropdown1.value.handleClose()
} else {
dropdown1.value.handleOpen()
}
}
function showClick() {
dropdown1.value.handleOpen()
}
</script>