element-plus/docs/examples/dropdown/dropdown-methods.vue
Alan Wang db41ec5d5e
feat(components): [el-dropdown]add handleOpen and handleClose methods (#5444)
* 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
2022-01-19 15:04:44 +08:00

49 lines
1.5 KiB
Vue

<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>