Element UI中 NavMenu 导航菜单控件下拉选项框宽度设置

最新推荐文章于 2024-05-20 14:17:06 发布
最新推荐文章于 2024-05-20 14:17:06 发布
阅读量3.8k 收藏 5
点赞数 1
分类专栏： 前端踩坑 文章标签： ui elementui vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46221897/article/details/124056685
版权

今天开发的时候遇到了一个怎么也想不到的问题，下面就来说说这个 "坑".

如何让子选项框宽度与父级一致，话不多说直接上代码。

这个属性十分重要，要想修改其控件属性，必须加上。

:popper-append-to-body="false"

加上之后只需要修改此属性就可达到预期效果

 

萧何.
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
NavMenu-template：导航菜单非常流畅，即会根据设备的屏幕宽度更改其形状
02-15
导航菜单模板 导航菜单非常流畅，多数民众赞成在其形状取决于设备的屏幕宽度。 实施了本指南： :
element-ui 下拉框宽度设置
jack_tyc的博客
10-11 1692
element-ui select 下拉框宽度设置
Elementui el-autocomplete下拉框宽度单独设置
最新发布
m0_61663332的博客
05-20 446
可根据需求对弹出框进行样式调整。
使用 Element-UI 的 navMenu 组件实现无限级下拉导航菜单并实现路由跳转和默认当前路由高亮样式
CCG_T的博客
08-27 2678
看过Element-UI的导航菜单组件的文档的同学应该了解到文档的demo都是有限级的菜单，然而现实场景业务通常有可能是这样子： （1）菜单由后台接口返回； （2）前端写死，但是业务需求是不定级别的导航菜单。下面就为实现无限级下拉导航菜单献上code！ 一：实现无限级下拉的思路是：递归菜单数组数据。 二：实现操作是：组件调用自己本身从而达到实现递归菜单数据。 （1）父组件：menu.vue // ...
elment左侧菜单栏拖拽调整宽度
m0_46404694的博客
02-28 2592
在Sidebar中添加一个组件div，div添加鼠标事件监听拖拽左侧距离，改变左侧菜单栏宽度。elment框架左侧菜单栏文字过长，不显示完全，需要拖拽调整左侧宽度。
vue根据定义data的变量修改elementui 导航二级菜单样式 解决适配一级菜单宽度问题
小猫爪子
10-11 3036
在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示，因为elementui导航样式默认： .el-menu--collapse .el-menu .el-submenu, .el-menu--popup { min-width: 200px; } 需要动态改变min-width的值。 解决： 一开始考虑通过css动态改变样式的方法，设置 this.$el.style.setProperty("--width",this.width); 给变量赋值，但是由于elementui
vue实现左侧导航菜单可拖拽改变左侧导航宽度
可可爱爱的你吖的博客
08-26 4693
vue实现左侧导航菜单可拖拽改变左侧导航宽度
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在本文中，我们将探讨如何在Vue.js应用程序中结合Element UI库创建一个具有下拉功能菜单的树形控件，这个功能通常用于增强用户界面的交互性。Vue和Element UI的组合提供了丰富的UI组件，使得开发人员能够快速构建...
【Vue2 + ElementUI】拖动侧边栏以便自由调整左右两侧的宽度
weixin_47375144的博客
07-18 3884
侧边栏，自由调整宽度
修改element-ui远程搜索的下拉菜单距离
Jack_13201的博客
05-18 780
一、问题现象 二、代码中修改 <style lang="scss"> .el-popper[x-placement^=bottom], .el-select-dropdown { margin-top: 5px; } </style> 三、效果
Vue3通过 directive 实现 el-dropdown下拉菜单项最小宽度等于内容宽度
m0_46627730的博客
09-12 1387
这两种方式设置最小宽度是需要提前知道内容宽度的值，那么就得在编码的时候限定一个值，限制性太大了。配置项是可以实现效果的，所以我们只需要解决内容宽度计算并且设置下拉框最小宽度即可。并不提供配置项让我们实现下拉菜单项最小宽度等于内容宽度，但我们能发现它提供了。渲染的时候进行自定义计算，获取内容宽度的同时设置下拉框选项的最小宽度。这个 API 可以让我们自定义指令，使。配置项来实现想要的功能呢？通过实现这个效果，学会了如何使用。这种形式进行最小宽度的设置？答案明显是可行的，但有个。，感觉还是很有收获的。
下划线和父级宽度一样宽
臧小川的博客
09-17 171
HTML <div class="box1"> <span> 我的下划线占全屏 </span> <div class="fade"></div> </div> <div class="box2"> <span> 这个跟我的盒子宽度一样长 </span> <div class="fade"></div&g.
vue NavMenu(菜单超出显示更多)
m0_54625720的博客
08-16 2342
vue NavMenu(菜单超出显示更多)
Vue element响应式布局导航栏递归生成.el-submenu .el-menu-item里面出现min-width:200px样式穿透问题.
daishaochen的博客
09-27 1350
分析问题的原因：导航栏布局是采用element的响应式布局并且是封装成组件递归调用出来的下级导航栏，方便以后调用接口动态渲染导航栏。问题发现处：可以看出二级导航栏多出有点宽度，样式里面有一个min-width:200px。导航样式默认最小宽度200px。所以后面递归生成的子组件的宽度就成了200px.vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。解决办法：由于是递归生成的下级导航栏会出现样式穿透的问题。这样子后面的下级导航栏的宽度就可以改变了！
element-ui组件 el-menu导航菜单边缘不对齐
qq_44886882的博客
08-27 2631
记录element-ui组件中el-menu导航菜单使用中遇到的边缘不对齐的问题以及解决思路和办法。
vue-element-admin 左侧菜单增加可拉伸收缩
Dream
12-11 3303
有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条，直接加title.,体验不太好，想增加一个手动拖动拉伸收收缩的功能 目录slidebar增加拖拽点增加动态style增加计算属性barWidth监听拖拽点 slidebar增加拖拽点 增加id 为split-panel的布局。且设置isCollapse为true的时候，即只有打开的时候才可以进行拖拽 split-panel样式： #split-panel { cursor: col-resize; height: 100%; width.
Vue+Element UI导航菜单样式修改 submenu
热门推荐
ABCD198643的博客
06-06 1万+
1.右击检查，查看现在的样式，类名复制，粘在css中修改 2.el-submenu不能修改 重新写一个style样式 去掉scoped <style scoped lang="scss"></style> <style> .el-menu--horizontal>.el-submenu ....
element ui如何修改NavMenu 导航菜单里面选项的样式
06-06
要修改 Element UI 的 NavMenu 导航菜单里面选项的样式，可以使用以下两种方法： 1. 使用 Element UI 提供的样式类 在 NavMenu 组件中，每个选项都是一个 el-menu-item 组件，因此你可以使用 Element UI 提供的样式类来修改选项的样式。例如，要修改选项的背景颜色和字体颜色，可以在 CSS 文件中添加以下代码： ``` /* 修改选项的背景颜色 */ .el-menu-item.is-active, .el-menu-item:hover { background-color: #f0f0f0; } /* 修改选项的字体颜色 */ .el-menu-item.is-active a, .el-menu-item:hover a { color: #333; } ``` 2. 自定义 NavMenu 组件的模板 如果你需要更复杂的样式修改，可以自定义 NavMenu 组件的模板，在模板中添加自己的 CSS 样式。具体操作步骤如下： 1）在 Vue 组件中，使用 template 属性自定义 NavMenu 组件的模板，并在模板中添加自己的 CSS 样式。例如： ``` <template> <el-menu class="my-nav-menu"> <template v-for="item in menuData"> <el-menu-item :index="item.index" :key="item.index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </template> </el-menu> </template> <style scoped> .my-nav-menu { /* 自定义 NavMenu 的样式 */ } .my-nav-menu .el-menu-item { /* 自定义 NavMenu 选项的样式 */ } </style> ``` 2）在 Vue 组件的 script 标签中，使用 components 属性注册自定义的 NavMenu 组件，并在其他组件中使用自定义的 NavMenu 组件。 ``` <script> import { defineComponent } from 'vue'; import MyNavMenu from './MyNavMenu.vue'; export default defineComponent({ name: 'MyApp', components: { 'my-nav-menu': MyNavMenu, }, }); </script> <template> <div> <my-nav-menu :menuData="menuData" /> </div> </template> ``` 通过以上两种方法，你可以灵活地修改 NavMenu 导航菜单里面选项的样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值