element-plus/docs/examples/menu/popper-offset.vue
知晓同丶 750088624e
feat(components): [menu] add popperOffset and ellipsisIcon props(#14923) (#15051)
* feat(components): [menu] add popperOffset and ellipsisIcon props(#14923)

* Update docs/examples/menu/ellipsis.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Update docs/en-US/component/menu.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Update docs/en-US/component/menu.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* docs(components): [menu] upgrade props

* Update docs/en-US/component/menu.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

---------

Co-authored-by: zhixiaotong <zhixiaotong.me@qq.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
2023-12-06 10:34:47 +08:00

40 lines
1.5 KiB
Vue

<template>
<el-menu
ellipsis
class="el-menu-popper-demo"
mode="horizontal"
:popper-offset="16"
style="width: 600px"
>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-sub-menu index="2-4">
<template #title>item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="3" :popper-offset="8">
<template #title>Override Popper Offset</template>
<el-menu-item index="3-1">item one</el-menu-item>
<el-menu-item index="3-2">item two</el-menu-item>
<el-menu-item index="3-3">item three</el-menu-item>
<el-sub-menu index="3-4" :popper-offset="20">
<template #title>override child</template>
<el-menu-item index="3-4-1">item one</el-menu-item>
<el-menu-item index="3-4-2">item two</el-menu-item>
<el-menu-item index="3-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="4" disabled>Info</el-menu-item>
<el-menu-item index="5">Orders</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup></script>