mirror of
https://github.com/element-plus/element-plus.git
synced 2025-12-19 09:09:40 +08:00
8400d0d998
* feat(components): [dropdown] add `virtual-ref / virtual-triggering / show-arrow` props * docs: update * docs: add tag * test: add case * chore: format * docs: update
79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<el-card
|
|
class="content"
|
|
@click="handleClick"
|
|
@contextmenu="handleContextmenu"
|
|
>
|
|
Right click
|
|
</el-card>
|
|
<el-dropdown
|
|
ref="dropdownRef"
|
|
:virtual-ref="triggerRef"
|
|
:show-arrow="false"
|
|
:popper-options="{
|
|
modifiers: [{ name: 'offset', options: { offset: [0, 0] } }],
|
|
}"
|
|
virtual-triggering
|
|
trigger="contextmenu"
|
|
placement="bottom-start"
|
|
>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
|
|
<el-dropdown-item :icon="CirclePlusFilled"> Action 2 </el-dropdown-item>
|
|
<el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
|
|
<el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
|
|
<el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import {
|
|
Check,
|
|
CircleCheck,
|
|
CirclePlus,
|
|
CirclePlusFilled,
|
|
Plus,
|
|
} from '@element-plus/icons-vue'
|
|
|
|
import type { DropdownInstance } from 'element-plus'
|
|
|
|
const dropdownRef = ref<DropdownInstance>()
|
|
const position = ref({
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
} as DOMRect)
|
|
|
|
const triggerRef = ref({
|
|
getBoundingClientRect: () => position.value,
|
|
})
|
|
|
|
const handleClick = () => {
|
|
dropdownRef.value?.handleClose()
|
|
}
|
|
|
|
const handleContextmenu = (event: MouseEvent) => {
|
|
const { clientX, clientY } = event
|
|
position.value = DOMRect.fromRect({
|
|
x: clientX,
|
|
y: clientY,
|
|
})
|
|
event.preventDefault()
|
|
dropdownRef.value?.handleOpen()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 200px;
|
|
}
|
|
</style>
|