[03][创新实训记录]iview实现侧栏和页面的关联

最新推荐文章于 2024-04-30 15:30:40 发布
最新推荐文章于 2024-04-30 15:30:40 发布
阅读量557 收藏 2
点赞数 1
分类专栏： 创新实训记录 前端学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41998718/article/details/106848989
版权

iView实现侧栏和显示页面的关联

iview是什么

iview是一套基于Vue.js的高质量UI组件库，里面组件齐全、组件美观，是一套适合开发界面管理系统的UI组件库，因此我们选择其作为开发项目实训管理系统的参考。

利用iview实现管理界面侧栏功能

布局

iview提供了各种形式的Layout，我们可以在其中选择适合自己开发的项目的后台布局，实现相应的侧边栏功能。
我这里选择的是顶部-侧边布局-通栏的布局
在这里插入图片描述

侧边栏Sider与内容Content关联

content通过路由中的children来实现，但是我们如何将Content和Sider绑定。
可以发现，侧边栏菜单的是由<MenuItem>组件确定的，只需要添加to=“/route”就可以实现点击左侧侧栏实现右侧页面到转到/route页面

<MenuItem name="1" to="/admin/home">
最低0.47元/天 解锁文章
qq_41998718
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js iView Layout相关修改
月想容的博客
04-17 9783
问题：        在利用Vue.js和iView组件库设计网页时，使用原生的html代码太多，并不好维护。回看iView官方文档，发现有个布局组件，考虑能不能使用这个进行简单的重写。过程：        由于个人编写的是一个应用型后台管理网站，所以选取如图的整体布局        整体代码可以简单的表示成&lt;template&gt; &lt;Layout&gt; &lt;!-- he...
iview菜单（Menu）和选项卡（Tabs）的组合应用
weixin_43890267的博客
05-30 5348
iview菜单（Menu）和选项卡（Tabs）的组合应用前提最后成果总体流程创建layout布局将所有router组件进行注册进行编码总结 前提 本人学习iview阶段，组合应用的前提要掌握vue，vue-router等基础，本次项目利用的是router-link和router-view进行的操作，才可实现。 最后成果 相对于一些管理系统等，都会有着一定的帮助。 总体流程 创建layout布局 ...
iview-layout布局
weixin_30795127的博客
06-28 1457
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。 Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。 Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。 Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Lay...
基于uniapp vue3.0 uView 做一个点单页面（包括加入购物车动画和左右联动）
最新发布
m0_49083276的博客
04-30 1808
下拉有自定义组件（商品卡片、进步器、侧边栏等）源码。
ViewDragHelper 的简单使用（实现侧边栏滑动效果）
u013685113的博客
05-30 543
package com.android.myapplication; import android.content.Context; import android.support.v4.view.ViewCompat; import android.support.v4.widget.ViewDragHelper; import android.util.AttributeSet; import...
iView 实战系列教程(21课时)_4.iView 实战教程之布局篇（二）
weixin_30616969的博客
07-16 881
https://github.com/iview/iview 下载iview的代码 Layout布局大概的样子 Iview的源代码。Layout 组件比较简单，，里面一个slot Sider是最复杂的组件 这里用了v-model的语法糖是，是vue里面的 上面的v-model实际就相当于下面的这段，通过事件改变了value的值 了...
iView 4.* 自定义侧边栏触发器（修正）
1H1R1M的博客
08-17 727
#1）问题： 去年刚接触vue，写过要给通过iView框架自定义侧边栏触发器的布局内容。当时对vue和它的生态一窍不通，也没什么基础，所以之前的那篇文章还有许多问题。但是还有两个小伙伴有问到其中菜单伸展隐藏的问题，借此机会重新把之前写的整理一下，同时解决一下之前没有解决的问题，希望能给一些小伙伴一些帮助。 #2）过程： 2.1 依赖包，"view-design":"^4.3.2" 2.2 vue-cli创建一个hello项目（过程略） 2.3 使用iView官网的布局模板 2.4 左侧侧..
vue iview实现动态新增和删除
10-15
在本案例中，我们将讨论如何利用Vue和iView来实现这一功能。 首先，我们需要了解Vue的基础知识。Vue是一个轻量级的前端JavaScript框架，用于构建用户界面。它提供了声明式的数据绑定和组件化，使得开发更加高效。而...
vue iview实现动态路由和权限验证功能
08-27
Vue iView 实现动态路由和权限验证功能是一个关键的实践，尤其在开发企业级Web应用时，确保用户只能访问他们被授权的页面。本篇主要介绍如何在Vue框架结合iView UI库的情况下，构建这样的系统。 首先，动态路由分为...
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在这个场景下，我们将探讨如何利用Vue和IView实现一个具有拖拽和双击编辑功能的Tree组件。 首先，让我们了解一下`Tree`组件。在Web应用中，`Tree`组件通常用于展示层级关系的数据，如文件系统、组织结构等。IView中...
vue+iview 自定义侧边栏（Sider）触发器（trigger）
1H1R1M的博客
03-31 9339
#1），记录原因描述： 想要修改Sider的样式（背景颜色），通过给Sider设置了新的class后，背景颜色虽然修改了，但是低端的触发器样式仍然是Menu组件的”Dark“主题样式。 查看官方文档知道，Sider 可以设置hide-trigger属性来隐藏默认触发器。 #2），模板： 模板大致是iView官方文档中的“Layout布局”中的其中一个。截图如下，代码见官网： #3），修...
iview中侧边菜单的使用
weixin_44960011的博客
01-28 915
1首先下载iview并引入 $ npm install view-design --save 2，新建一个Vue文件，这里叫做Main.vue <template> <div class="layout"> <Layout> <Sider hide-trigger> <common-aside ></common-aside> </Sider> &
iView侧边栏（Sider）宽度修改
momo_mo520的博客
05-11 2586
想要修改Sider宽度，却发现在vue的style中设置并不成功。研究过后发现，不成功的原因有下面几点： 1、默认样式有最大宽度限制，所以不成功； 默认样式最大宽度限制 2、可以在元素的行内标签设置修改，不能在样式表中修改，原因是iview的默认样式设置在了element.style中。要对element.style中的设置复写，就只能采用行内标签方式。 element.style中的设置 所以，综上，在元素标签中使用行内sty...
iview中修改布局组件中的侧边栏高度
simon-_-的博客
10-22 2080
问题 iview中的布局组件看起来十分不舒服，原因在于它的高度不能铺满屏幕全屏，而官方也没有相关修改高度的api，要改变它的高度就必须要修改它的默认样式。 方法 这是官方的布局 这样看起来就很不舒服 修改样式代码 在Sider标签的上一个Layout父标签添加 style="position:absolute;top: 64px;bottom: 0px;left: 0px;right: 0px;...
iView UI 折叠侧边导航菜单时，隐藏下箭头
m0_52309519的博客
06-07 759
解决iView UI折叠菜单面板，折叠后不隐藏“下箭头”的问题。
iview获取_vue+iview 项目
weixin_42138788的博客
02-06 529
vue-cli3创建项目 (创建一个项目 | Vue CLI)1,vue ui (视图创建,会在localhost打开页面,创建项目)2,vue create hello-world路由跳转// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$rout...
iview学习笔记
yh_1524的博客
01-04 725
1.Layout标签不能撑满页面 解决办法： 在Layout标签中加入样式 :style="{minHeight: '100vh'}"
vue+iView 权限实践之动态显示侧边栏菜单
weixin_44794123的博客
10-09 3153
实现：iview vue 根据不同的登录用户角色显示不同的左侧菜单权限。
iview 实现的地区选择器
10-11
iView是一种基于Vue.js框架...通过使用iView的地区选择器组件，我们可以方便地实现一个地区选择功能，用户可以通过选择器来选择所在的地区，获取选择的地区信息后进行后续的操作和处理，从而提升用户体验和开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值