IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue-emementui商城学习-03 -> 正文阅读

[JavaScript知识库]vue-emementui商城学习-03

1.左侧菜单栏的缩小与放大

放大效果
缩小效果

这个功能是通过定义一个按钮,然后给这个按钮绑定一个方法,来控制中的collapse属性,从而达到此效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

以上的四张图,我们慢慢捋一遍思路:

  • 首先在<el-menu>标签中,有一个collapse属性,当设置为true时,菜单为缩小状态,设置为false时,菜单为放大状态,我们通过绑定iscollapse的值来实现动态变化。
  • 所以我们为一个按钮绑定一个方法(handlecollapse),这个方法的作用的就是:每一次点击,就将data(){}中的iscollapse值取反,以达到放大缩小的切换
  • 然后,最后一步要解决的就是,当菜单缩小放大的时候,外面的宽度(也就是Aside的宽度也要随之变化),我们同样可以观察iscollapse的状态来确定其宽度

2.home页面中,右侧main部分的复用

在这里插入图片描述
首先,我们新建一个.vue文件,比如welcome.vue文件,然后我们为其注册路由
在这里插入图片描述
首先在路由配置页面导入.vue文件,然后将其绑定在home的子路由下,将home路由设置一个重定向,指向welcome路径,然后在children下面配置子路由
在这里插入图片描述
最后,要在el-main标签下面添加<router-view></router-view>标签,这样才会把子路由挂载到main的部分

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-04 21:14:30  更:2021-07-04 21:15:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年4日历 -2024/4/23 16:29:53-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码