vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

这篇具有很好参考价值的文章主要介绍了vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

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 选择组件

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

antdesign 导航菜单动态显示,vue.js,javascript,前端

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 最终效果

antdesign 导航菜单动态显示,vue.js,javascript,前端

         效果如上图所示,我这里也写了一个面包屑,不过还有些问题,就交给大伙儿实现吧!文章来源地址https://www.toymoban.com/news/detail-618779.html

到了这里,关于vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant-design-vue在ios使用AUpload组件唤起了相机,HTML的 `capture` 属性

    在使用ant design vue组件的上传组件AUpload的时候有一个问题,直接按照demo写,在ios上会唤起相机,但是实际上我们的需求是弹出选择相册/相机这个弹框。 解决办法是加一个 cupture=\\\"null\\\"这个属性即可 HTML attribute: capture - HTML: HyperText Markup Language | MDN The capture attribute specifies that

    2024年02月12日
    浏览(47)
  • [ant-design-vue] table组件列宽拖拽功能

    原有的样式文件没有使用的必要,个人添加的部分样式内容就符合需求了 vue3.x对应的ant-design-vue中的table组件本身支持列宽的拖动了,不需求额外的包的支持,根据Api说明设置resizeColumn即可

    2024年01月23日
    浏览(49)
  • vue3使用Vite打包报Rollup failed to resolve import “xxx/node_modules/ant-design-vue/xxxx

    在使用vue3 + vite + ant design vue 的时候,引入一些antd的一些组件的时候,通常运行是没有错的,但是打包会报错,例如: Rollup failed to resolve import \\\"D:/xxxxx/node_modules/ant-design-vue/es/form-item-rest/style/index\\\" from \\\"src/views/xxx/xxx.vue\\\". 15:01:51 This is most likely unintended because it can break your applic

    2024年02月16日
    浏览(47)
  • html中如何用vue语法,并使用UI组件库 ,html中引入vue+ant-design-vue或者vue+element-plus

    前言 先说一下本次应用的场景,本次项目中,需要引入github中别人写好的插件,插件比较大,没有方法直接在自己项目中,把别人的项目打包合并生成html(类似于前端项目打包生成的 dist ),修改这里面的html,这种情况要么用原生js写或者jquery还相对快一些,那为什么不直

    2024年02月10日
    浏览(51)
  • vue3+element-plus的后台管理系统模板 和 vue3+ant-design-vue的后台管理系统模板

    规范 :后台系统模板,按照企业级别的规范搭建的。 权限控制 :通过后端返回的路由表(这个路由表是由前端这边在系统配好的然后存储在后端的)来动态渲染菜单和注册路由,同时也根据页面内的接口权限对页面中的按钮做了是否可见的设置。前端这边有 路由、角色、用

    2024年02月08日
    浏览(81)
  • ant-design-vue中upload上传图片、视频实现预览功能

    有没有小伙伴在使用ant-design-vue的upload组件时,发现api文档在图片预览功能的介绍寥寥无几,而且也没提供视频预览的demo,在实际开发中碰到相应的需求直挠头~~~~,别急,下面来给大家分享一个我自己封装的upload组件,符合需求可以直接在项目中放到组件目录调用。 templat

    2024年02月12日
    浏览(45)
  • 【ant-design-vue】实现table的拖拽排序(拖拽行和伸缩列):

    1.效果: 拖拽前: 拖拽后: 2.实现: 3.出现的问题: 4.初始拖拽版本: 5.相关知识:

    2024年02月12日
    浏览(40)
  • 关于 ant-design-vue resetFields 失效

    关于 ant-design-vue resetFields 失效 背景: 遇到这样的问题使用 ant-design-vue useForm 来制作表单的时候, resetFields()失效 场景: 编辑 -赋值 新增 -初始值(问题点:新增的时候他就不 初始化 ) 方案: 1、调用 resetFields() 传参 2、要么使用 reactive 明确定义初始值 解释: 首先我这里讲

    2024年01月17日
    浏览(49)
  • vue2+ant-design-vue a-select组件二次封装(支持单选/多选添加全选/分页(多选跨页选中)/自定义label)

    参数 说明 类型 默认值 v-model 绑定值 boolean / string / number/Array - mode 设置’multiple’\\\'tags’多选 (显示全选) String - optionSource 下拉数据源 Array - width select宽度(可以设置百分比或px) String 100% customLabel 是否自定义设置下拉label String - valueKey 传入的 option 数组中,要作为最终选择

    2024年02月08日
    浏览(50)
  • ant-design-vue 自由切换 暗黑模式dark

    思路 引入 dark.css 文件 动态切换 prefixCls 实现效果 我们来看看官网怎么说的 官网地址 除了 less 定制主题 外,我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 ConfigProvider 进行体验。 调用 ConfigProvider 配置方法设置主题色: 默认情况下,CSS Variable 会以 --ant 作

    2023年04月21日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包