快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vue3-+-element-plus实现侧边栏

vue3-+-element-plus实现侧边栏

时间:2022-09-30 09:01:06人气:作者:快盘下载我要评论

一般前端项目少不了侧边栏。如图所示
vue3-+-element-plus实现侧边栏
这些鬼东西特别繁琐;所以我们喜欢找些现成、开源的所谓后台管理的前端框架;开箱即用。方便是方便;而且做得还挺好;问题是;有学习成本;要按照它的规则行事。一些功能是怎么实现的;不清楚;除非研究它的源代码。想改的话;更不容易。一切都靠猜、盲测;一则不好改;二则出了问题也不知道是哪里的毛病;反而欲速则不达。

所以我们之前基于一个空白的vue项目开发;把需要的路由、ajax封装等摞上去。现在是实现侧边栏菜单。点击左侧菜单项;对应页面展示在右侧。下面是详细介绍;ui框架采用element plus。

1、如何编写侧边栏结构页面

html代码其实简单;左侧菜单用<el-menu>;右侧展示使用<router-view>。后者不用做啥设置;点击菜单项;结果自然就展示在右侧了。好神奇。

以下是一个包含侧边栏的页面示例。支持二级菜单。三级或更多就不行了。

<template>
  <el-container>
    <el-aside width=;255px;> <!-- 侧边栏宽255px -->
      <!-- router是关键属性 -->
      <el-menu
        router 
        :default-active=;to;
        active-text-color=;#ffd04b;
        background-color=;#001529;
        text-color=;#999;
        class=;el-menu-vertical-demo sliderHeight;
      >
	    <!-- 如果菜单项存在子孙节点;使用el-sub-menu -->
        <el-sub-menu v-if=;item.children; :index=;item.route;>
            <template #title>
              <el-icon><component :is=;item.icon;></component></el-icon>{{ item.text }}
            </template>
            <el-menu-item
              v-for=;item2 in item.children;
              :key=;item2.name;
              :index=;item2.route;
            >
              <template #title>
                <el-icon><component :is=;item2.icon;></component></el-icon
                >{{ item2.text }}
              </template>
            </el-menu-item>
          </el-sub-menu>
          <!-- 否则使用el-menu-item -->
          <el-menu-item v-else :index=;item.route;>
            <template #title>
              <el-icon><component :is=;item.icon;></component></el-icon>{{ item.text }}
            </template>
          </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
     <!-- 结果展示在这里 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

2、默认选中菜单及加载对应页面

很自然地;打开包含侧边栏结构的页面;应该有一个菜单项默认被选中;同时加载对应的页面。

但是element plus只提供了选中指定菜单功能;加载页面需要自己完成。

1;默认选中指定的菜单项
设置属性el-menu.default-active。属性值是el-sub-menu.indexel-menu-item.index

      <el-menu
        router
        :default-active=;to;
        active-text-color=;#ffd04b;
        background-color=;#001529;
        text-color=;#999;
        class=;el-menu-vertical-demo sliderHeight;
      >
<el-menu-item :index=;item.route;>

2;加载对应页面
elment plus只能设置选中菜单项;加载相应页面需要自己动手。

import { useRouter } from ;vue-router;;

	const router = useRouter();
    const gotoDefaultPage = (menus) => {
      if (menus && menus.length > 0) {
        const path = router.currentRoute.value.path;
        //如果当前路径是子菜单;则直接打开子菜单;否则打开第一个子菜单
        //页面中;使用了菜单项的route作为index
        const to = path.split(;/;).length > 2 ? path : menus[0].route;
        router.replace(to);
      }
    };

    onMounted(() => {
      const menus = getMenus();
      gotoDefaultPage(menus);
    });

3、刷新页面

好像刷新页面;选中啥的会丢失;页面一片空白?这个问题记得不是很清楚了;现在我没有这个问题。可能是获取到当前路由;按照路由重新打开。代码见2。

const path = router.currentRoute.value.path;
//如果当前路径是子菜单;则直接打开子菜单;否则打开第一个子菜单
//页面中;使用了菜单项的route作为index
const to = path.split(;/;).length > 2 ? path : menus[0].route;
router.replace(to);

4、icon

plus实现侧边栏
每个菜单项前面有个小图标。图标应该在菜单项/路由表二合一的数据中定义。取值从elment plus的icon中选取。
数据结构

  {
    path: ;p3-1;,
    name: ;p3-1;,
    component: () => import(;../views/module3/page1;),
    meta: {
      text: ;页面A;,
      icon: ;Histogram;,
    },
  },

页面

  <el-menu-item :index=;item.route;>
    <template #title>
      <el-icon>
      	<!-- 关键的一句 -->
      	<component :is=;item.icon;></component>
      </el-icon>{{ item.text }}
    </template>
  </el-menu-item>

因为可以使用任意的element plus的icon;所以索性全局注册

src/main.js

import { createApp } from ;vue;;
import App from ;./App.vue;;
。。。
import ElementPlus from ;element-plus;;
import ;element-plus/dist/index.css;;
import * as ElIcons from ;;element-plus/icons-vue;;

const app = createApp(App);
app.use(ElementPlus).mount(;#app;);

for (const name in ElIcons) {
  app.component(name, ElIcons[name]);
}

5、新开窗口

在侧边栏结构页面中;如何打开一个新窗口呢?

其实;无论是在普通页面;还是这种侧边栏结构页面;点击一个链接或按钮;打开一个新窗口;代码都是一样的。但是;里面用到了路由。如果该路由没有注册;那么在本文所示的侧边栏结构页面中;打开新窗口会失败;页面仍然显示在右侧;没有新开窗口;这一度让我很困惑;以为<router-view>需要给个name;然而并没有什么卵用。按照本文所示的例子;侧边栏结构页面实际上有2个<router-view>。一个是app.vue里设置了;然后侧边栏结构页面实际上是包含在外面这个<router-view>中;然后它自己也有一个<router-view>。两个都没有命名;那么都叫“default”。可能系统采取了就近原则;在侧边栏结构页面中点击新窗口链接;永远都对应它本身这个<router-view>。然而在定义路由项中;使用components;指定名称;不好使;一点用没有。后来我才发现;新开窗口的链接;或者说是路由;一定要注册;这样就能新开窗口了。

新开窗口的代码;

<template>
  <div ;click=;browseIt(1000); class=;show-detail;>打开明细页</div>
  <div>
    <router-link target=;_blank; to=;p2-1/detail/999;
      >第一种新窗口打开页面</router-link
    >
  </div>
</template>
<script>
import { reactive } from ;vue;;
import { useRouter } from ;vue-router;; //引入useRouter

export default {
  setup() {
    const router = useRouter();
    const browseIt = (id) => {
      const to = router.resolve({
        name: ;p2-1-detail;, //这里是跳转页面的name;要与路由设置保持一致
        params: { id: id },
      });
      window.open(to.href, ;_blank;);
    };

    return {
      browseIt,
    };
  },
};
</script>

路由

  {
    path: ;p2-1/detail/:id;,
    name: ;p2-1-detail;,
    component: () => import(;../views/module2/page-1-detail.vue;),
    meta: {
      text: ;页面一明细;,
      noList: true,
    },
  },

6、无限级菜单

前面的例子;菜单级别只能去到二级。如果要实现无限级;需要使用递归。页面组件递归。代码如下;

整体的侧边栏结构页面;

<template>
  <el-container>
    <el-aside width=;255px;>
      <el-menu
        router
        :default-active=;to;
        active-text-color=;#ffd04b;
        background-color=;#001529;
        text-color=;#999;
        class=;el-menu-vertical-demo sliderHeight;
      >
        <template v-for=;item in menus; :key=;item.name;>
          <!-- 自定义的菜单组件 -->
          <middle-menu :item=;item;></middle-menu>
        </template>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import MiddleMenu from ;./SidebarMenu.vue;;
</script>

自定义的菜单组件

<template>
  <el-sub-menu v-if=;item.children; :index=;item.route;>
    <template #title>
      <el-icon><component :is=;item.icon;></component></el-icon
      >{{ item.text }}</template
    >
    <template v-for=;innerItem in item.children; :key=;innerItem.name;>
      <!-- 递归 -->
      <middle-menu :item=;innerItem;></middle-menu>
    </template>
  </el-sub-menu>

  <el-menu-item v-else :index=;item.route;>
    <template #title>
      <el-icon><component :is=;item.icon;></component></el-icon>{{ item.text }}
    </template>
  </el-menu-item>
</template>

<script>
import { defineComponent } from ;vue;;

export default defineComponent({
  name: ;middle-menu;,
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
});
</script>

相关文章;
不依赖框架用vue3空白项目从头打造一个过得去的前端

相关文章

  • Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程

    Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程,vue3 状态管理工具 pinia 使用,Vue3状态管理之Pinia的入门使用教程,Pinia使用详解(vue3默认状态管理),详解Vue3状态管理库Pinia的使用方法,Vue3 使用Pinia状态管理,vue3新一代状态管理器 — pinia的学习与使用,vue3使用pinia管理状态,vue3全家桶之-状态管理器pinia的使用,Vue3中Pinia的基本使用,上手Vue 新的状态管理 Pinia,一篇文章就够了,Pi...
  • Clion 2021软件下载和安装教程

    Clion 2021软件下载和安装教程,CLion 2021是款适用于C和C ++的跨平台IDE,功能强大的智能编码辅助和代码分析软件,使用 CLion能够通过即时导航和可靠的重构来提升你的工作效率,......

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。