element-plus/docs/examples/dropdown/how-to-trigger.vue

82 lines
2.7 KiB
Vue

<template>
<el-row class="block-col-2">
<el-col :span="8">
<span class="demonstration">hover to trigger</span>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<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>
</el-col>
<el-col :span="8">
<span class="demonstration">click to trigger</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<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>
</el-col>
<el-col :span="8">
<span class="demonstration">right click to trigger</span>
<el-dropdown trigger="contextmenu">
<span class="el-dropdown-link">
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<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>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import {
ArrowDown,
CircleCheck,
Check,
CirclePlus,
CirclePlusFilled,
Plus,
} from '@element-plus/icons-vue'
</script>
<style scoped>
.block-col-2 .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>