Vue3 - AntDesignVue 实现 动态面包屑 带 icon 图标

最新推荐文章于 2024-07-19 09:20:22 发布
最新推荐文章于 2024-07-19 09:20:22 发布
阅读量564 收藏 3
点赞数 8
文章标签： vue.js 前端 javascript anti-design-vue vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61463372/article/details/137245849
版权
本文介绍了如何在Vue3项目中结合AntDesignVue库，通过设置路由元信息和配置Breadcrumb组件，实现带有图标的动态面包屑导航。详细步骤包括在路由配置中添加meta信息以存储面包屑数据，然后在Breadcrumb组件内部利用这些信息创建动态组件来展示图标。
摘要由CSDN通过智能技术生成

设置路由中的 mete

  • 路由中的配置
  • 通过配置 meta 让我们拿到面包屑所需的名称 + icon 图标
// router/index.ts
import {
    HomeOutlined, GlobalOutlined } from '@ant-design/icons-vue';
const router = createRouter({
   
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
   
      path: "/site",
      name: "site",
      component: () => import("../views/SiteView.vue"),
      meta: {
   
        path:</
最低0.47元/天 解锁文章
子玖
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
2024年Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能(1)，单页web开发
2401_84446825的博客
05-04 612
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记我这边的左侧菜单栏是写死的，不是后台返回的动态菜单。其实写菜单很简单，这篇博文不会写的很多，我直接把项目放到 Git 上，down下来看一下就可以了，很简单能明白。主要是我们选择了一个菜单，然后如果我们页面刷新了，怎么保持我们打开的页面还是刷新前那个。
Vue ant-d 实现面包屑和布局和菜单 demo
11-09
Vue ant-d 实现面包屑和布局和菜单 demo，里面使用vue+ant-d实现页面布局，面包屑、路由，菜单功能
ant-design-vue2.x动态渲染icon图标
weixin_45803990的博客
04-29 3034
input输入框样式的修改 带搜索的输入框 <a-input-search placeholder="搜索信息" @search="onSearch" class="search"/> 修改背景色： 项目用的是less、如果是在当前页面内直接写是不生效的！！！，这个样式要外部引入才会生效。 比如我的就是在main.js中引入了全局的less样式，就把这个less写在全局less中就行了。 // 带搜索的输入框 .ant-input-affix-wrapper .ant-.
vue3+vue-router动态路由设置与面包屑实现
会写点代码
06-12 955
vue3+vue-router动态路由设置与面包屑实现
Vue3/React 动态设置 ant-design/icons 图标
卡尔特斯
11-07 2413
使用方式上，依然达到使用图片名称就能使用图标，下面以。这种标签方式，当需要像以前一样动态切换使用。文件，相当于自己做一个。
vue3+ant design vue 动态加载Icon图标
forever__fish的博客
02-26 2437
在使用前端组件库时，我们常常会遇到需要动态加载 Icon 图标，如何处理这一需求，是前端开发人员必须思考的问题。在 vue 中，有一个内置组件 component，它的主要作用是配合 is 动态渲染组件，这一作用就满足了我们上述的需求。
vue3.2 动态面包屑导航
grow_的博客
02-26 2159
1、创建面包屑导航组件 breadcrumb.vue,elementplus中有 2、js操作，获取当前路由的完整路径 //引用路由 import {useRoute} from 'vue-router const route=useRoute() //当前路由的完整路径 console.log(route.matched) 但是，我们每次点击菜单跳转，都要进行变化，所以不能写死 // 引入路由 import { useRoute} from 'vue-router' const route
Ant Design Vue3.x中动态渲染icon图标
平行时空的猫
05-04 8049
前言 随着vue3成为默认版本，越来越多的开发者选择vue3进行项目的开发，UI组件库也对Vue3进行了适配，Ant Design Vue3.x升级后，icon图标的使用方式有了如下的改变： 要使用icon需要先引入后在以组件的形式使用： import { AppstoreOutlined, MessageOutlined, CalendarOutlined} from '@ant-design/icons-vue'; <AppstoreOutlined /> <MessageOutli
vue-antdesign-admin-template：Ant Design Pro Vue模板
02-05
蚂蚁设计专业Vue模板根据改造后的开箱即用的后台管理系统模板，优化了很多内容，更轻量，更简洁，可以在此模板上快速，便捷地去建造自己的后台项目。预览：|优化：项目结构和文件夹命名，项目结构更加合理优化：只...
vue element-ui实现动态面包屑导航
10-15
在本文中，我们将深入探讨如何使用 Vue 和 Element UI 来实现动态面包屑导航，这是一种显示当前页面路径的实用功能。 动态面包屑导航在用户界面设计中扮演着重要的角色，它可以帮助用户理解他们在网站或应用中的...
Vue-Ant Design Vue-普通及自定义校验实例
01-18
Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计...
Vue动态面包屑功能的实现方法
12-29
面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。 <el-breadcrumb-item v-for=(item,index) in breadList :k
Vue 解决多级动态面包屑导航的问题
12-13
固定路由的面包屑导航 我们在配置router的时候，可以将面包屑数据配置在meta中， 例如 路由配置： { path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { name: '项目管理列表' }, { name: '项目列表', url: '/project/list' }, { name: '里程碑' }, ], }, 代码： <el-breadcrumb sep
ant-design-vue3-admin:一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用
05-19
ant-design-vue3-admin 一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用。 最新的技术栈 统一的技术规范 权限方案（路由，菜单，操作...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
@ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone ...
基于vue Ant-Design 的表单设计器，快速开发.zip
05-04
基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design ...
Vue3 antdv 如何动态渲染 icons-vue 图标
最新发布
m0_55333789的博客
07-19 146
Vue3 antdv 如何动态渲染 icons-vue 图标
vue-动态生成面包屑
weixin_45608302的博客
09-10 750
配置路由 分三级 { path: '/macthed', name: 'macthed', component: () => import( '../views/macthed'), meta:{title:"资源管理"}, children:[ { path: 'maca', name: 'maca', component: () => import( '../views/mac-son/ma
uniapp Vue3 面包屑导航 带动态样式
特创数字
12-27 1007
uniapp Vue3 面包屑导航 带动态样式
vue3-antDesign4x中的表单如何实现单元格合并
06-09
在 Ant Design Vue 4.x 中，表单中的单元格合并可以通过自定义表单项的方式实现。具体步骤如下： 1. 自定义表单项，实现单元格合并的逻辑。 ```js <template> <a-form-item :label="label"> <span>{{text}}</span> </a-form-item> </template> <script> export default { name: 'MyFormItem', props: { label: { type: String, default: '' }, text: { type: String, default: '' }, colspan: { type: Number, default: 1 } } } </script> ``` 2. 在表单中使用自定义表单项，并通过 `span` 元素的 `colspan` 属性指定单元格合并的列数。 ```js <template> <a-form :form="form"> <my-form-item :label="'姓名'" :text="'张三'" :colspan="2" /> <my-form-item :label="'性别'" :text="'男'" /> <my-form-item :label="'年龄'" :text="'25'" /> </a-form> </template> <script> import MyFormItem from './MyFormItem.vue' export default { name: 'MyForm', components: { MyFormItem }, data() { return { form: {} } } } </script> ``` 在上面的例子中，第一个表单项通过 `colspan` 属性将单元格合并到了第二列和第三列，实现了单元格合并的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值