Vue3点击侧边导航栏完成切换页面内组件(WEB)
Vue3点击侧边导航栏完成切换页面组件
(图片来源网络,侵删)
目录
- 效果
- 思路
- 过程
- 获取当前点击DOM并添加点击class
- 将其它的导航未点击项isclick样式类去除
- 完整代码
- 导航代码
- 显示页面代码
- 路由设置
- 感谢
效果
点击左侧导航,右面页面切换。
思路
使用router-view显示点击后需要切换的组件,需要先完成网页的结构。侧面导航 + 页面显示部分
如:
(图片来源网络,侵删)设置一个class属性,点击元素时给当前元素额外添加一个class类。给导航中每个点击项添加上点击事件,当点击当前项时其它项的class变成原本的,当前元素添加一个当前点击的class类,而组件切换则由router完成,使用router-link to 完成路由路径切换。
当前点击模式类代码:
.isclick { background: #e9feff; color: #0bbfbc; }
过程
获取当前点击DOM并添加点击class
这里需要注意,触发事件的元素对象(不一定是绑定事件的对象,会因为事件冒泡变化),所以我们需要获取绑定事件的元素对象。
$event:当前触发的是什么事件
$event.target:触发事件的元素对象(不一定是绑定事件的对象)
$event.currentTarget:绑定事件的元素对象
(图片来源网络,侵删)此处需要使用: e.currentTarget
改变选中元素的class: e.currentTarget.className = ‘nav-item isclick’
其中nav-item为未点击时的navitem样式类,isclick为点击后更改的样式类,原来样式只有一个nav-item,再添加一个isclick。
将其它的导航未点击项isclick样式类去除
-
得到点击项的其它兄弟节点
var domList = e.currentTarget.parentNode.children
parentNode 是得到父节点
children 是得到子节点
当前元素的父节点的所有子节点,是一个列表
-
将所有节点的点击样式类去除
for(let d=0;d{item.title}} ref,reactive } from 'vue' var NavList = reactive([ { title: "合作伙伴", url: "/partner", icon: require("@/assets/首页-选中.png") }, { title: "客户列表", url: "/customer", icon: require("@/assets/客户列表.png") }, { title: "订单列表", url: "/order", icon: require("@/assets/财务列表.png") }, { title: "物料列表", url: "/materials", icon: require("@/assets/标签列表.png") }, { title: "成员管理", url: "/corpuser", icon: require("@/assets/员工列表.png") }, { title: "收益概览", url: "/income", icon: require("@/assets/员工列表.png") }, { title: "价格配置", url: "/price", icon: require("@/assets/员工列表.png") }, { title: "系统设置", url: "/setting", icon: require("@/assets/员工列表.png") } ]) function clickNav(e) { var domList = e.currentTarget.parentNode.children for(let d=0;d domList[d].className = 'nav-item' } console.log('点击',e.currentTarget) e.currentTarget.className = 'nav-item isclick' } list-style-type: none; } a { text-decoration: none; color: #39475A; } .nav { width: 200px; height: 100%; background: #FFFFFF; box-shadow: 3px 0px 6px 0px rgba(82, 82, 82, 0.14); } .nav ul { margin-top: 32px; padding: 0; } .nav-item { width: 200px; height: 46px; font-family: PingFangSC-Medium; font-size: 16px; color: #39475A; letter-spacing: 0; line-height: 46px; font-weight: 500; } .nav-item div { margin-left: 17px; height: 46px; line-height: 46px; } .nav-item div img { width: 20px; height: 20px; } .nav-icon { vertical-align: middle; margin-right: 7px; padding-bottom: 6px; } .isclick { background: #e9feff; color: #0bbfbc; } .nav-img-box img { width: 200px; height: 416px; } display: flex; } createRouter, createWebHistory } from 'vue-router' import PartnerView from '../views/PartnerView.vue' import CustomerView from '../views/CustomerView.vue' import OrderView from '@/views/OrderView' import MaterialsView from '../views/MaterialsView' import CorpUserView from '@/views/CorpUserView' import InComeView from '@/views/InComeView' import PriceView from '@/views/PriceView' import SettingView from '@/views/SettingView' const routes = [ { path: '/', name: 'index', component: PartnerView, redirect: 'partner', }, { path: '/partner', name: 'partner', component: PartnerView }, { path: '/customer', name: 'customer', component: CustomerView }, { path: '/order', name: 'order', component: OrderView }, { path: '/materials', name: 'materials', component: MaterialsView }, { path: '/corpuser', name: 'corpuser', component: CorpUserView }, { path: '/income', name: 'income', component: InComeView }, { path: '/price', name: 'price', component: PriceView }, { path: '/setting', name: 'setting', component: SettingView } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
-
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...