vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

目录
  • 0 前言
  • 1 准备工作
    • 1.1 安装ant-design-vue
    • 1.2 安装图标组件包
  • 2 选择组件
  • 3 路由文件
  • 4 Vue导航页面
  • 5 最终效果

0 前言

最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享。

1 准备工作

基于一个新建的Vue3项目上实现。

1.1 安装ant-design-vue

官方文档:Components Overview - Ant Design Vue (antdv.com)

安装:

npm i --save ant-design-vue

全局注册:

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');

1.2 安装图标组件包

npm install --save @ant-design/icons-vue

main.js中引用并全局注册

import * as Icons from '@ant-design/icons-vue'
//全局注册图标
const icons = Icons
for (const i in icons) {
  app.component(i, icons[i])
}

2 选择组件

如下图所示,复制组件代码:

3 路由文件

router/index.js文件

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    //导航页
    path: '/layout',
    name: 'layout',
    meta: {
      title: '首页',
      keepalive: true
    },
    component: () => import('@/views/layout/'),
    children: [
      {
        //欢迎页
        path: '/layout',
        name: 'welcome',
        meta: {
          title: '首页',
          keepalive: true
        },
        component: () => import('@/views/welcome/')
      },
      {
        //实时数据
        path: '/runtimeData',
        name: 'runtimeData',
        meta: {
          title: '实时数据',
          keepalive: true
        },
        component: () => import('@/views/runtimeData/')
      },
      {
        //数据分析
        path: '/dataAnalysis',
        name: 'dataAnalysis',
        meta: {
          title: '数据分析',
          keepalive: true
        },
        component: () => import('@/views/dataAnalysis/')
      },
      {
        //数据处理(增删改查)
        path: '/dataManage',
        name: 'dataManage',
        meta: {
          title: '数据总览',
          keepalive: true
        },
        component: () => import('@/views/dataManage/')
      },
      {
        //查看用户信息
        path: '/showUserInfo',
        name: 'showUserInfo',
        meta: {
          title: '查看用户信息',
          keepalive: true
        },
        component: () => import('@/views/my/showUserInfo.vue')
      },
      {
        //修改用户信息
        path: '/editUserInfo',
        name: 'editUserInfo',
        meta: {
          title: '修改用户信息',
          keepalive: true
        },
        component: () => import('@/views/my/editUserInfo.vue')
      },
    ]
  },
  {
    //登录页面
    path: '/login',
    name: 'login',
    meta: {
      title: '登录',
      keepalive: true
    },
    component: () => import('@/views/login/index.vue')
  },

]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

4 Vue导航页面

views/layout/index.vue,主要关注标签a-layout中的内容及相关变量

<template>
  <a-layout id="components-layout-demo-custom-trigger" style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>

      <div class="logo">
        温湿度数据显示
      </div>

      <a-menu @click="navClick"
              v-model="currentSelectChild"
              @openChange="onOpenChange"
              :openKeys="currentParent"
              :inline-collapsed="collapsed"
              :selectedKeys="[route.path]"
              theme="dark"
              mode="inline"
      >

        <template v-for='(item,index) in NavDataInfo.NavData'>
          <a-sub-menu :key="item.Path" v-if='item.Child.length > 0'>
            <template #title>
              <a-icon>
                <meh-outlined/>
              </a-icon>
              <span>{{item.Title}}</span>
            </template>
            <a-menu-item v-for="(itChild,ind) in item.Child" :key="itChild.Path">
              <a-icon>
                <meh-outlined/>
              </a-icon>
              <router-link :to="itChild.Path">
                <!--根据路径去跳转页面-->
                {{itChild.Title}}
              </router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item :key="item.Path" v-else>
            <a-icon>
              <meh-outlined/>
            </a-icon>
            <router-link :to="item.Path">
              <a-icon :type="item.Icons"/>
              <span>{{item.Title}}</span>
            </router-link>
          </a-menu-item>

        </template>

      </a-menu>

    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div id="header">
          <div id="left">
            <span>作者:</span>
          </div>
          <div id="right">
            <a-avatar src="https://joeschmoe.io/api/v1/random"/>
            <el-dropdown>
              <span class="el-dropdown-link">
                User
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item><router-link to="/showUserInfo">我的信息</router-link></el-dropdown-item>
                  <el-dropdown-item><router-link to="/editUserInfo">修改信息</router-link></el-dropdown-item>
                  <el-dropdown-item><span @click="outLogin">退出登录</span></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </a-layout-header>
      <!--      <keep-alive>-->
      <a-layout-content style="margin: 0 16px">
        <!-- 面包屑 -->
        <a-breadcrumb style="margin: 16px 0" separator=">">
          <!-- 自定义返回函数 ←-->
          <a-breadcrumb-item @click="goback">
            <a-icon>
              <import-outlined/>
            </a-icon>
            返回
          </a-breadcrumb-item>
          <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
            <router-link v-if="item.name !== name && index !== 1"
                         :to="{ path: item.path === '' ? '/' : item.path }">
              {{ item.meta.title }}
            </router-link>
            <span v-else>
              {{ item.meta.title }}
            </span>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <!--          <transition>-->
        <div :style="{ padding: '24px', background: '#fff', minHeight: '100%' }">
          <router-view/>
        </div>
        <!--          </transition>-->
      </a-layout-content>
      <!--      </keep-alive>-->
      <a-layout-footer style="text-align: center">
        Great Project 2022 Created by
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script setup>
  import { ref, reactive, onBeforeMount, watch, createVNode } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { Modal, message } from 'ant-design-vue'
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
  import myRouter from '@/router'
  import { ArrowDown } from '@element-plus/icons-vue'
  //************************************************data部分
  const route = useRoute()
  const router = useRouter()
  const collapsed = ref(false)
  const selectedKeys = ref(['0'])
  const name = ref('')
  const breadList = ref([])
  const NavDataInfo = reactive({
    NavData: [
      {
        NavID: '0',
        Icons: 'home',
        Title: '首页',
        Path: '/layout',
        Child: []
      },
      {
        NavID: '1',
        Icons: 'meh',
        Title: '实时数据',
        Path: '/runtimeData',
        Child: []
      },
      {
        NavID: '2',
        Icons: 'like',
        Title: '数据管理',
        Path: '/dataManage',
        Child: [
          {
            NavID: '2-1',
            Icons: 'man',
            Title: '数据总览',
            Path: '/dataManage',
            Child: []
          },
        ]
      },
      {
        NavID: '3',
        Icons: 'key',
        Title: '数据分析',
        Path: '/dataAnalysis',
        Child: []
      },
    ],
  })
  //************************************************data部分

  //************************************************方法
  const getBreadcrumb = () => {
    breadList.value = []
    name.value = route.name
    route.matched.forEach(item => {
      breadList.value.push(item)
    })
    console.log(breadList.value)
    console.log(name.value)
    console.log(route)

  }
  // 返回上一页,调用的组件 router.back();
  const goback = () => {
    //点击了返回按钮
    router.back()
  }

  //退出登录
  const outLogin = () => {
    Modal.confirm({
      title: '您确定要退出登录吗?',
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode('div', {
        style: 'color:red;',
      }, '点击OK则将退出!'),
      onOk () {
        // console.log('OK', key)
        message.success('退出登录!')
        myRouter.push({ path: "/login" });
      },
      onCancel () {
        // console.log('Cancel')
        message.success('取消成功!')
      },
      class: 'test',
    })
  }

  //监视路由
  watch(() => route.path, getBreadcrumb)

  //*************************************************方法

  //*************************************************生命周期
  onBeforeMount(() => {
    getBreadcrumb()
  })
  //*************************************************生命周期

</script>
<style scoped>
  #components-layout-demo-custom-trigger {
    height: 100%;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgb(127, 252, 255);
    margin: 16px;
    font-size: 20px;
    text-align: center;
    font-family: 宋体;
  }

  #header {
    display: flex;
    height: 70px;
    /*margin: 0;*/
    padding: 0;
  }

  #left {
    width: 80%;
    /*height: 25px;*/
    /*background-color: darksalmon;*/
    justify-content: flex-start;
    display: flex;
    align-items: center;
    margin-left: 16px;
  }

  #right {
    flex: 1;
    width: 20%;
    /*background-color: coral;*/
    /*height: 50px;*/
    justify-content: flex-end;
    display: flex;
    align-items: center;
    margin-right: 16px;
  }
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }

</style>

上面的代码中将路由文件中的路由表重新写了一个变量,主要是为了方便,并不是所有页面路由都要制作导航栏,这样就不用在router/index.js中添加路由时考虑太多。

5 最终效果

效果如上图所示,我这里也写了一个面包屑,不过还有些问题,就交给大伙儿实现吧!

到此这篇关于vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能的文章就介绍到这了,更多相关vue3使用ant-design-vue实现动态导航栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • ant-design-vue中的select选择器,对输入值的进行筛选操作

    今天在设计一个标签(采用的是Select 选择器中的标签那一个)时,从后台返回了数据,但是在输入值时,没有对回显的值进行过滤匹配,通过查看官方文档,解决了这个问题. 记在这里方便以后查看. <a-form-item label='标签' v-bind="formItemLayout"> <a-select mode="tags" :allowClear="true" :filterOption="filterOptio

  • Vue3导航栏组件封装实现方法

    在Vue3中封装一个导航栏组件,并且实现,随着滚动条滚动实现一个吸顶效果,供大家参考 导航栏组件的效果图: 滚动条滚动以后的吸顶效果示意图: 具体代码展示: <template> <header class="app-header"> <div class="container"> <!-- 头部导航区域 --> <HeaderNavCommon /> <div class="search&

  • Ant-design-vue Table组件customRow属性的使用说明

    官网示例 使用方式 // 表格中加入customRow属性并绑定一个custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table> // methods中定

  • ant-design-vue导航菜单a-menu的使用解读

    目录 一.效果 二.关键的API 三.注意事项 四.代码 此文章包含了递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题. 一.效果 可以看到递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题得以解决.我自己的电脑设备老旧,反应缓慢的问题请忽略. 二.关键的API 说实话遇到问题了不知道该怎么解决,说白了还是不懂得API的使用,对相关的API不够了解,熟悉了API怎么操作都行.下面说说用到但是又容易混淆的API. 1.defaultSelectedKeys 默认选中的key

  • vue3+Element采用递归调用封装导航栏实现

    目录 效果预览 模拟数据 父组件aside.vue 子组件subAside.vue 配置 效果预览 模拟数据 数据来源有很多,可以是自己写死的,也可以是后端调用得到的,也可以从别的组件中拿到 这里采用从路由中拿 定义数据源src/router/module.js/ const Login = () => import('../views/Login/Login.vue'); const Layout = () => import('../layout/layout.vue'); const H

  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享. 1 准备工作 基于一个新建的Vue3项目上实现. 1.1 安装ant-design-vue 官方文档:Components Overview - Ant De

  • Vue3(二)集成Ant Design Vue

    目录 一.集成Ant Design Vue 二.组件的使用 1.完整引用 2.组件引用 三.组件使用示例 1.我们在home主页做修改 2.重新启动服务查看效果 四.总结 上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目(一)接下来承接上一篇文章的基础继续展开下面文章的内容 一.集成Ant Design Vue SQL: npm install ant-design-vue@2.0.0-rc.3 --save 兼容性: Ant Design Vue 2.x 支持所有的现代浏览器. 如果

  • ant design vue的table取消自带分页问题

    目录 ant design vue的table取消自带分页 题外话: ant design vue table分页 ant design vue table分页设置 ant design vue的table取消自带分页 在我们使用ant design vue的table组件的时候会发现: 组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table> 显然

  • Ant Design Vue table中列超长显示...并加提示语的实例

    我就废话不多说了,大家还是直接看代码吧~ <template> <a-row class="a-left"> <a-row> <p class="a-title">今日考勤状况</p> <a-row type="flex" justify="space-around"> <a-col :span="4" class="b

  • Vite中使用Ant Design Vue3.x框架教程示例

    目录 引言 安装 ant-design-vue main.js引入,全局使用 按需引入 引言 官网: https://www.antdv.com/docs/vue/introduce-cn 文档选择vue3版本,也是官网当前推荐的 安装 ant-design-vue npm i --save ant-design-vue main.js引入,全局使用 import { createApp } from 'vue' import App from './App.vue' import router

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • ant design vue datepicker日期选择器中文化操作

    按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')&q

随机推荐