vue+element-ui实现Dropdown侧边弹出

指尖温度

已于 2023-07-19 11:55:58 修改

阅读量2.8k

点赞数

文章标签： vue.js elementui

于 2023-07-19 11:41:40 首次发布

本文链接：https://blog.csdn.net/fantacyqq/article/details/131804889

版权

前端新手使用Vue和Element-UI的Dropdown组件，通过设置placement属性为left-start，成功实现了侧边弹出菜单的功能。文章详细记录了这一学习过程，并提供了实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+element-ui实现Dropdown侧边弹出

- 最终效果
- 实现代码

前端新手，需要实现侧边弹出菜单，在element官网找到dropdown，但其中placement中没有侧边弹出的方法，遂尝试手动填入placement=“left-start”，竟然实现了，说明dropdown里是有内置的弹出方向的，记录学习。

最终效果

请添加图片描述

实现代码


            <el-dropdown @command="SwitchMapType" placement="left-start" size="mini">
                <button type="button" id="fixToCenter" class="underlay_btn">
                    <img src="@/assets/test/test.png"></button>
                <el-dropdown-menu class="lang-select-dropdown">
                    <el-dropdown-item command="test1">测试1</el-dropdown-item>
                    <el-dropdown-item command="test2" :divided="true">测试2</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>