当前位置: 首页 > 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…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...