iview Menu组件中加入其它非menu-item组件时出现无法用id控制样式的情况

最新推荐文章于 2022-09-16 16:26:01 发布
最新推荐文章于 2022-09-16 16:26:01 发布
阅读量132 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanren201/article/details/114603126
版权

糟糕的情况如图所示：
在这里插入图片描述
我是想让这个欢迎字样和登出按钮一起弄到menu这一行里的，然后把欢迎字样和登出按钮一起挪到导航栏的右边
解决方法是在欢迎字样和登出按钮的CSS里添加这句代码：display:inline-block，也就是让它们成为块级元素；然后用一个大div把这俩组件包裹起来，并在大div的CSS样式里设置float:right让这俩组件都飘到导航栏的最右边

阿袁的小园子
关注
专栏目录
el-menu 菜单组件的优化
Beam
08-23 1830
问题： 选中菜单，路由跳转了，但需要点击两次才有选中的颜色。 F12查看，第一次点击时没有绑定上.isactive，第二次点击才绑定该样式。 原来使用router模式是没有这个问题的，但是现在不用router模式，通过select方法跳转路由。 原因： router模式下，路由根据index绑定值进行跳转。 而index绑定值需要唯一，如果存在路由为空串’'容易出现点击空串的节点展开了全部等问题。 并且系统中容易出现路由不唯一的情况，只有code\id\sn才能保证唯一性。 于是只能舍弃router模式，@
vue 部门tree样式_vue2-org-tree 基于VUE的部门组织架构组件，增删节点实现
weixin_39585691的博客
12-21 1388
本文基于antd(其他前端组件框架操作基本都类似的： iview，elementui，boostrap-vue...)当然，github上还有其他类似的组件，实现方法各有不同，显示效果也有差异，但都是很方便的组件。看到网上有很多相关的使用教程，github上也写得很清楚，这里恕不在重复，本文主要实现增删节点。场景：我们通常展示部门树的时候，简单的直接就是一个下拉框展示，为了显示明显，可能会使用一...
使用iview的Menu组件，路由中断跳转但是路由高亮仍然改变问题
xiaomajia029的博客
07-24 2784
问题描述： 最近项目有一个需求，在表单填写相关页面，如果用户没有保存表单内容，点击导航栏将要离开页面的时候提示“信息未保存，离开页面数据将会丢失，是否确定离开？” （1）选择“确定” —— 执行路由跳转 （2）选择“取消” —— 中止跳转，仍旧留在当前页 以上为需求描述，遇到的问题是：选择取消后，侧导航栏的高亮项不正确。 简单示例如下图：点击“错误收集”，取消路由跳转，页面仍停留在“...
自定义控件id无法被识别的解决方法
onwfonfwd的博客
12-05 1234
1，android studio菜单栏build，选clean project。
Material Design控件使用（二）
阳春面的专栏
06-28 673
本文介绍如何使用DrawerLayout和NavigationView实现侧滑菜单栏的效果。
bootstrap 导航栏鼠标悬停显示下拉菜单
weixin_30861797的博客
01-02 470
在jsp中加入一下代码： .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示： <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html ...
Vue使用iview中menu菜单组件的大坑！
AWDSDF的博客
09-16 1152
Vue2使用iview中menu菜单组件的大坑
iView组件库之下拉框dropdown(树形结构)
weixin_34390105的博客
03-29 6361
Iview组件下拉框树形组件 iview官方示例 实现的效果 dropdown有个属性 transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false 赋值给它 false，这样不会因为失去焦点，而有部分内容会"消失" 我们观察iview给出的示例 &...
iview学习帮助文档
weixin_40885337的博客
03-25 3344
安装iview npm install view-design --save 导入iview 在main.js中导入iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 按需引用iview组件 a.安装babel npm install babel-plugin-import --save-dev b.在 .babelrc 文件中 { "plugins
vue搭配iview使用vue2-org-tree（组织结构图）增删节点实现
lanseguhui的博客
03-06 4130
首先npm安装依赖 npm install --save-dev less less-loader npm install --save-dev vue2-org-tree 在main.js中引入并使用 import Vue2OrgTree from 'vue2-org-tree' Vue.use(Vue2OrgTree); 新建组件中使用 <vue2-org-tree ...
iview给布局MenuItem标签绑定点击事件
李瑞清的博客
07-20 3847
在使用iview的MenuItem时，使用@click无法触发事件。通过排查，最后发现应该使用@click.native才可以触发事件。 1、@click.native .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 2、iview menu中是在mounted或者在组件dom加载前就执行了以下的赋值 <Menu :theme="theme" ...
vue 使用 elemen UI 导航菜单所遇到的问题
天火流光的博客
08-16 876
我们常常在开发vue 项目中使用 elemen UI 开结合开发，但在单页面应用中，随着用户的操作而改变的状态，我们常常使用 VueX 来做状态管理，但是，如果用户刷新页面，之前的状态都会消失，那么，导航该如何准确给当前页面的导航按钮添加选中的样式呢？ 直接上代码 <template> <el-menu router mode="horizontal" @select="selectMenu"> <template v-for="(item,index) in n
Wordpress菜单函数wp_nav_menu各参数详解及示例
james_laughing的博客
06-14 1771
https://blog.csdn.net/qq_37296622/article/details/82633833 注册菜单 首先要注册菜单，将以下函数添加至function.php函数里 register_nav_menus(array( 'PrimaryMenu'=>'导航', 'friendlinks'=>'友情链接', 'footer_nav'=>'页脚导航'...
关于iview中下拉框样式错乱问题，兼容移动端
Hello_yihao的博客
07-27 1245
在vue中使用iview的Select组件，当我在移动端苹果手机上使用时，拖动滑动页面，会导致Select组件位置错乱，体验非常差，这里记录下解决办法。 我们先看一下错乱图： 上图可以明显看到，Select的定位已经完全偏离父级，在安卓手机上也有同样的错误。 iview可能并不适合做响应式网页，但是问题出来了，就得解决，上述问题在pc端并未展示出来。 我们可以查看源码看下Select布局 上图蓝色部分，可以看到Select组件增加了行内样式fixed， 当我们在手机端滑动时，组件会实时计算高度，并重新赋值t
iview中动态实现menu三级菜单，多级菜单
vue+iview 动态渲染表格（vue.js结合iview插件）
07-25 5583
在新的项目中用到了iview中的menu菜单，我们的需求是三级菜单，按照官网写固定不太好，所以我就在页面上写了一个动态渲染（好几层循环！！！也算是个笨方法了，记录一下嘛，嘻嘻） template部分 <template> <div class="deskTop_page"> <Menu ref="side_menu" :active-name="act...
使用Iview Menu 导航菜单(非 template/render 模式)
weixin_30390075的博客
12-02 2718
1、首先直接参照官网Demo例子，将代码拷贝进项目中运行， 直接报错： Cannot read property 'mode' of undefined. 然后查看官网介绍，有一行注意文字，好吧。 2、然后将Menu标签改为i-menu. 这下没有报错了，但是样式显示的根本不是想要的： 什么个鬼，然后官网也没有其他什么说明了。。。。 OK，找度娘查找资料，找到这篇文...
wordpress主题开发：导航菜单函数wp_nav_menu()使用方法
csnewdn的专栏
12-29 9296
wordpress主题开发：导航菜单函数wp_nav_menu()使用方法 空谷2016-5-6 1400次浏览 0个评论 我们在做wordpress主题开发的时候，必不可少的是要读取后台外观-菜单中的导航结构，那么就需要用到wp_nav_menu()函数，本篇文章小编问大家介绍wp_nav_menu()函数的使用方法。 wp_nav_menu()函数使用非常的简单，只需要在你需要
vue使用iview采坑之MenuItem使用router-link跳转vue组件
李瑞清的博客
07-19 5961
一开始没有仔细阅读iview的官方文档，导致采坑。特别记录一下，希望能够给和我一样粗心的朋友一个帮助。 我使用iview的MenuItem菜单想实现组件的跳转，想到的是使用vue的router-link进行跳转，我的代码如下： <router-link to="/about"> <MenuItem name="4"> ...
iview table组件和i-switch使用时，怎么根据i-switch更新table中的值
最新发布
06-01
可以在 i-switch 的 change 事件中获取到当前 i-switch 的值以及所在行的索引，然后通过索引修改 table 的数据源中相应的数据即可。具体操作可以参考以下示例代码： ```html <template slot-scope="{ row }" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值