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

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

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

阿袁的小园子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
在使用iView的Modal组件时，如果Modal内包含需要响应数据变化的复杂组件，如图表，推荐使用`v-if`而非`v-show`来控制显示状态。这是因为`v-if`会触发组件的重新编译，确保子组件在Modal显示时能够获取到最新的数据。...
自定义控件id无法被识别的解决方法
onwfonfwd的博客
12-05 1223
1，android studio菜单栏build，选clean project。
bootstrap 导航栏鼠标悬停显示下拉菜单
weixin_30861797的博客
01-02 466
在jsp中加入一下代码： .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示： <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html ...
使用iview的Menu组件，路由中断跳转但是路由高亮仍然改变问题
xiaomajia029的博客
07-24 2783
问题描述： 最近项目有一个需求，在表单填写相关页面，如果用户没有保存表单内容，点击导航栏将要离开页面的时候提示“信息未保存，离开页面数据将会丢失，是否确定离开？” （1）选择“确定” —— 执行路由跳转 （2）选择“取消” —— 中止跳转，仍旧留在当前页 以上为需求描述，遇到的问题是：选择取消后，侧导航栏的高亮项不正确。 简单示例如下图：点击“错误收集”，取消路由跳转，页面仍停留在“...
Vue使用iview中menu菜单组件的大坑！
AWDSDF的博客
09-16 1150
Vue2使用iview中menu菜单组件的大坑
iview MenuItem动态渲染 active-name无效的问题
qq_41994549的博客
01-06 4088
&lt;Menu theme="light" width="auto" ref="user" :active-name="user" :class="menuitemClasses" :open-names="['1']"&gt; &lt;Submenu name="1"&gt;
Iview Table组件中各种组件扩展的使用
10-17
在本文中，我们将深入探讨Iview Table组件中的各种组件扩展，以及如何在实际应用中实现多选框选中与禁选设置，以及在Table组件中点击Icon弹出Poptip的两种方法。Iview Table是基于Vue.js的UI组件库，提供了丰富的...
vue iview的菜单组件Mune 点击不高亮的解决方案
10-16
在Vue.js应用中，特别是在使用iView UI框架开发时，我们可能会遇到菜单组件Menu在点击后不显示高亮效果的问题。这个问题通常是由于Vue Router的配置或组件自身的样式冲突导致的。下面将详细介绍如何解决这个问题。 ...
iview的日历组件，iview的日历组件
02-01
本文将深入探讨 `iView` 的日历组件，帮助开发者理解其核心功能、用法以及如何在实际项目中应用。 `iView` 的日历组件（Calendar）是一个直观的时间选择工具，适用于日期选择、日期范围选择等多种场景。它具有清晰...
基于iView和he-tree-vue的一个拖拽树形组件
12-16
在IT行业中，构建用户界面时，常常需要使用到各种组件来提高用户体验和操作效率。"基于iView和he-tree-vue的一个拖拽树形组件"是这样的一个实用工具，它结合了两个流行的Vue.js库的功能，为开发者提供了一个强大且...
wordpress主题开发：导航菜单函数wp_nav_menu()使用方法
csnewdn的专栏
12-29 9292
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 5959
一开始没有仔细阅读iview的官方文档，导致采坑。特别记录一下，希望能够给和我一样粗心的朋友一个帮助。 我使用iview的MenuItem菜单想实现组件的跳转，想到的是使用vue的router-link进行跳转，我的代码如下： <router-link to="/about"> <MenuItem name="4"> ...
vue 使用 elemen UI 导航菜单所遇到的问题
天火流光的博客
08-16 874
我们常常在开发vue 项目中使用 elemen UI 开结合开发，但在单页面应用中，随着用户的操作而改变的状态，我们常常使用 VueX 来做状态管理，但是，如果用户刷新页面，之前的状态都会消失，那么，导航该如何准确给当前页面的导航按钮添加选中的样式呢？ 直接上代码 <template> <el-menu router mode="horizontal" @select="selectMenu"> <template v-for="(item,index) in n
iview的menu组件的高亮部分动态绑定路由跳转的页面
从入门到放弃的博客
06-04 4593
menu组件的高亮部分反映的是当前的页面，但是当前页面会跳转到另外一个页面，相应的高亮部分也应该随着跳转。menu组件中有一个active-name反映的是当前高亮区域，因此可以动态的绑定active-name，来实现目的。 参考资料： https://segmentfault.com/q/1010000017914052 假设有A,B两个页面，页面配置的路由name叫A和B，将MenuIt...
iview 升级指南 —— MenuItem 篇
weixin_34179968的博客
08-05 1970
iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。 虽然官网已经有长长的更新日志，但看起来还是有些抽象了， 所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。 本篇是系列文章的第三篇，重点并不在介绍 MenuItem 的功能特性，而在于对其代码的讨论； 对其设计的思考。 班门弄斧，见谅。 唯一新增的特性 —— 支持链接模式 ...
iview menu 结合路由域计算属性改变菜单选中状态
weixin_44000275的博客
09-03 672
前言 之前写的一篇自制手风琴模式的菜单文章，只能实现点击切换和刷新切换菜单项的选中状态，在用其他方式如this.$route.push跳转时，发现菜单并没有改变选中状态，这里记一下，法线用这里的方法比之前的更加简洁简单。 代码 html：actName是计算属性名，openName是data中的一个字段 :active-name='actName' :open-names="openName" javascript data: activeName:'1',//选中菜单项
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、付费专栏及课程。

余额充值