当前位置: 首页 > news >正文

elementPlus——图标引入+批量注册全局组件——基础积累

因为我们要根据路由配置对应的图标,也要为了后续方便更改。因此我们将所有的图标注册为全局组件。(使用之前将分页器以及矢量图注册全局组件的自定义插件)(所有图标全局注册的方法element-plus文档中已给出)

全局注册elementPlus图标

在这里插入图片描述
经过上面的步骤,就可以把elementPlus自带的icon图标全局注册了。

路由使用elementPlus图标

给路由元信息添加属性:icon
layout和其子组件为例:首先在element-puls找到你要使用的图标的名字。将它添加到路由元信息的icon属性上

{//登录成功以后展示数据的路由path: '/',component: () => import('@/layout/index.vue'),name: 'layout',meta: {title: 'layout',hidden: false,icon: 'Avatar',//elementPlus中的图标},children: [{path: '/home',component: () => import('@/views/home/index.vue'),meta: {title: '首页',hidden: false,icon: 'HomeFilled',//elementPlus中的图标},},],
},

外部引入的svg图标——vite.config.js中批量引入

在这里插入图片描述

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig(({command,mode})=>{const env = loadEnv(mode,process.cwd())return {plugins:[vue(),AutoImport({resolvers: [ElementPlusResolver(),IconsResolver({prefix: 'Icon',}),],}),Components({resolvers: [ElementPlusResolver(),IconsResolver({enabledCollections: ['ep'],}),],}),Icons({autoInstall: true,}),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),]}
})

然后svg图标的使用,例如全屏图标:

<el-button icon="FullScreen" circle @click="fullScreen" />

顺道写下全屏功能的实现:

<script lang="ts" setup>
import {reactive,ref} from 'vue';
//全屏功能
const fullScreen = ()=>{//用来判断是不是全屏,返回布尔值const full = document.fullscreenElement//有兼容问题if(full){document.exitFullscreen();}else{document.documentElement.requestFullscreen();}
}
</script>

在这里插入图片描述

components中的组件全局批量注册——避免使用时多次引入

在这里插入图片描述

步骤一:在components文件夹中新建index.ts文件

步骤二:在index.ts文件中引入各个组件

import SvgIcon from './SvgIcon/index.vue'
import Category from '@/components/Category/index.vue'

步骤三:使用vue中的AppComponent

import type { App, Component } from 'vue'
const allGlobalComponent: Component = { SvgIcon, Category }

步骤四:使用install方法来处理

export default {install(app: App) {Object.keys(allGlobalComponent).forEach((key: string) => {// 注册为全局组件app.component(key, allGlobalComponent[key])})},
}

结合文章中第一步的全局引入elementPlus图标,也可以放在此文件中:
完整代码如下:

import SvgIcon from './SvgIcon/index.vue'
import Category from '@/components/Category/index.vue'
import type { App, Component } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const allGlobalComponent: Component = { SvgIcon, Category }
export default {install(app: App) {Object.keys(allGlobalComponent).forEach((key: string) => {// 注册为全局组件app.component(key, allGlobalComponent[key])})// 将 element-plus 的图标注册为全局组件for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}},
}

main.ts中引入components

import globalComponent from './components/index'
const app = createApp(App)
app.use(globalComponent)

相关文章:

elementPlus——图标引入+批量注册全局组件——基础积累

因为我们要根据路由配置对应的图标&#xff0c;也要为了后续方便更改。因此我们将所有的图标注册为全局组件。&#xff08;使用之前将分页器以及矢量图注册全局组件的自定义插件&#xff09;&#xff08;所有图标全局注册的方法element-plus文档中已给出&#xff09; 全局注册…...

国标GB28181安防视频平台EasyGBS显示状态正常,却无法播放该如何解决?

国标GB28181视频平台EasyGBS是基于国标GB/T28181协议的行业内安防视频流媒体能力平台&#xff0c;可实现的视频功能包括&#xff1a;实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。国标GB28181视频监控平台部署简单、可拓展性强&#xff0c;支持将…...

TIOVX:opencv的Mat类图像零拷贝转为openvx的vx_image格式,通过Not节点无效果问题记录

问题描述 代码中&#xff0c;创建了一个opencv的Mat图像(并打印了所有的像素值)&#xff0c;然后通过vxCreateImageFromHandle函数将Mat图像转为了vx_image图像(通过映射的方式打印了所有的像素值&#xff0c;通过日志可以看出与之前打印相同)。然后创建graph&#xff0c;将其作…...

变压器故障诊断(python代码,逻辑回归/SVM/KNN三种方法同时使用,有详细中文注释)

视频效果&#xff1a;变压器三种方法下故障诊断Python代码_哔哩哔哩_bilibili代码运行要求&#xff1a;tensorflow版本>2.4.0,Python>3.6.0即可&#xff0c;无需修改数据路径。 1.数据集介绍&#xff1a; 采集数据的设备照片 变压器在电力系统中扮演着非常重要的角色。…...

ASEMI探索整流桥GBU814的独特优势和应用领域

编辑-Z 整流桥GBU814在众多电子元件中独树一帜&#xff0c;可在多种设备中发挥其重要作用。作为一款集高效性能和可靠稳定性于一身的整流桥&#xff0c;GBU814已在全球范围内赢得了广泛的好评。在这篇文章中&#xff0c;我们将详细介绍GBU814整流桥的优势和应用领域。 让我们首…...

js脚本自动化之葫芦娃

什么是葫芦娃? 贵州特产平台(扶贫助农平台)有很多,但都大同小异,就连模样都像一个娘生的,所以戏称为葫芦娃平台 #小程序://航旅黔购/1nkYlNRVzm0Gg9x #小程序://贵旅优品/7zz6mtnSVgDfyqa #小程序://新联惠购/ibFdsuhWqIbczEd #小程序://贵盐黔品/u2TgExCUdkavrFe #小程…...

从零基础到精通IT:探索高效学习路径与成功案例

文章目录 导语&#xff1a;第一步&#xff1a;明确学习目标与方向选择适合的IT方向设定具体的学习目标咨询和调研 第二步&#xff1a;系统学习基础知识选择适合的编程语言学习数据结构和算法掌握操作系统和计算机网络基础 第三步&#xff1a;实践项目锻炼技能选择合适的项目编写…...

2023.8.8巨人网络数据开发工程师面试复盘

1 概述 问题一览 总体感觉良好&#xff0c;通过面试官的介绍可知这个岗位偏向离线数仓。 1.自我介绍 2.询问了其中一段实习经历 3.讲下你说用过的Linux命令 4.讲下HIVE的内部表和外部表有什么不同 *5.讲下你使用过的Hive函数&#xff08;好好在复习下多准备几个吧&#xff09…...

Python Opencv实践 - 图像仿射变换

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) rows,cols img.shape[:2] print(img.shape[:2])#使用getAffineTransform来获得仿射变换的矩阵M #cv.getAffineTransform(…...

如何使用CSS实现一个模态框(Modal)效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现模态框&#xff08;Modal&#xff09;效果⭐ HTML 结构⭐ CSS 样式⭐ JavaScript⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎…...

关于API数据接口获取商品的数据的说明

获取商品数据已经成为许多应用程序的重要组成部分。为了实现这一目标&#xff0c;许多公司和技术开发者使用API数据接口来获取相关数据。本文将详细介绍如何使用API数据接口获取商品数据&#xff0c;并使用Python作为编程语言示例来展示相关代码。 API数据接口是一种通信协议&…...

Redis持久化——AOF

介绍 Redis是运行在内存中的数据库&#xff0c;当我们关闭了Redis服务器后&#xff0c;内存中的数据会丢失吗&#xff1f; 答案是不会的&#xff0c;因为Redis有持久化功能&#xff0c;能够将内存中的数据保存到磁盘中的文件&#xff0c;以此来实现数据的永久保存。 在Redis中…...

Qt 嵌入Vue项目 flapMap 浏览器兼容性问题

最近有个需求&#xff0c;Qt工程需要嵌入vue项目&#xff0c;本来是很简单的事情。在我的PC上启动Vue项目&#xff0c;同事PC上用浏览器通过IP地址可以正常加载vue项目&#xff0c;但用Qt嵌入总是失败。问题定位步骤如下&#xff1a; 1&#xff09;换了一个简单的vue项目&…...

1.SpringMVC接收请求参数及数据回显:前端url地址栏传递参数通过转发显示在网页

1、SpringMVC 处理前端提交的数据 1.1 提交的域名和处理方法的参数不一致&#xff0c;使用注解解决 1.2 提交的域名和处理方法的参数不一致&#xff0c;使用注解解决 1.3 提交的是一个对象 2、前端url地址栏传递的是一个参数 请求地址url&#xff1a;http://localhost:8080/s…...

C++ Primer Plus: 第10章(2)

第10章编程题&#xff1a; &#xff08;1&#xff09; Account.h: #ifndef ACCOUNT_H_ #define ACCOUNT_H_#include <string>class Account { private:std::string name ;std::string code ;double money ; public:Account() ;Account(std::string Name, std::string Co…...

c++中的extern关键字

extern关键字主要修饰变量或函数&#xff0c;表示该函数可以跨文件访问&#xff0c;或者表明该变量在其他文件定义&#xff0c;在此处引用。 extern修饰变量 &#xff08;1&#xff09;如果某变量int m在a.c中定义声明&#xff0c;则其他b.c文件访问时&#xff0c;需要用exte…...

javaScript:快乐学习计时器

目录 一.前言 二.计时器 1.计时器的分类 2. 创建计时器的方式 创建间隔计时器 创建方式三种 1.匿名函数 2.使用函数直接作为计时器的执行函数 2.使用函数直接作为计时器的执行函数,用字符串的形式写入 3.计时器的返回值 4.清除计时器 5.延迟计时器 相关代码 一.前言 在…...

onnxruntime 支持的所有后端

1 代码导出 import onnxruntime as ort aaa ort.get_all_providers() print(aaa)1. 1 下面是ort支持的所有后端 TensorrtExecutionProvider, CUDAExecutionProvider, MIGraphXExecutionProvider, ROCMExecutionProvider, OpenVINOExecutionProvider, DnnlExecutionProvider…...

k8s 自身原理 5

我们知道容器是通过 pod 来承载的&#xff0c;我们在 k8s 中&#xff0c;服务都是跑在 pod 里面的&#xff0c;pod 里面可以跑 1 个容器&#xff0c;或者跑多个容器&#xff0c;那么咱们 pod 里面跑 1 个服务容器&#xff0c;咱真的就以为里面就只有这样个容器吗&#xff1f; …...

机器视觉应用开发什么最重要?

&#xff08;QQ群有答疑&#xff09;零基础小白快速上手海康VisionMaster开发系列课程 高级语言在机器视觉就是工具&#xff0c;机器视觉软件&#xff0c;在机器视觉中也是工具&#xff0c;在机器视觉应用开发中&#xff0c;图像处理是最重要的&#xff0c;一切看图像&#xff…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...