<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>
<style scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>
