Svg使用和注册components文件夹内部全部为全局组件
1.安装SVG依赖插件
pnpm install vite-plugin-svg-icons -D
2. 封装SvgIcon
<template><div><svg :style="{ width: width, height: height }"><use :xlink:href="prefix + name" :fill="color"></use></svg></div>
</template><script setup lang="ts">
defineProps({//xlink:href属性值的前缀prefix: {type: String,default: '#icon-'},//svg矢量图的名字name: String,//svg图标的颜色color: {type: String,default: ""},//svg宽度width: {type: String,default: '16px'},//svg高度height: {type: String,default: '16px'}})
</script>
<style scoped></style>
Vue2中使用
Vue3+Ts中使用
1. 在src/components文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!!
index.ts
// 引入项目中全部的全局组件 一个一个引入,然后加载全局对象中
// 这里的index.vue就是封装好的scgicon组件
import SvgIcon from './SvgIcon/index.vue'
import type { App, Component } from 'vue';// 全局对象
const components: { [name: string]: Component } = { SvgIcon };
export default {install(app: App) {// 注册项目全部的全局组件Object.keys(components).forEach((key: string) => {app.component(key, components[key]);})}
}
2. 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件
import gloablComponent from './components/index';
app.use(gloablComponent);
相关文章:
Svg使用和注册components文件夹内部全部为全局组件
1.安装SVG依赖插件 pnpm install vite-plugin-svg-icons -D 2. 封装SvgIcon <template><div><svg :style"{ width: width, height: height }"><use :xlink:href"prefix name" :fill"color"></use></svg>…...
解决idea编辑application.yml文件或properties文件没有提示问题
注意:这里说的没有提示,是针对application.properties和application.yml文件 解决办法:在idea的插件面板中,禁用或卸载 wl Spring Assistant插件即可解决问题。...
前端懒加载
懒加载的概念 懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分…...
【手动配置ip地址后,电脑仍自动分配ip的问题】
现象 手动给电脑分配了一个ipv4地址,但是电脑会自动分配一个169开头的ipv4,导致虽然可以上网,但访问不了局域网内其他的设备(我配置的另一个网关,所以可以上网) 原因 ip地址冲突了,把电脑的i…...
移远RM500U-CN模块直连嵌入式ubuntu实现拨号上网
目录 1 平台: 2 需要准备的资料 3 参考文档 4 编译环境与驱动移植 4.1 内核驱动添加厂家ID和产品ID 4. 2.添加零包处理 4.3 增加复位恢复机制 4.4 增加批量输出 批量输出 URB 的数量和容量 的数量和容量 4.5 内核配置与编译 5 QM500U-CN拨号(在开…...
【JavaWeb】MySQL基础操作
1 通用语法规则 SQL语句可以单行或者多行书写,以分号结尾SQL语句不区分大小写,关键字建议使用大写单行注释 --注释内容(通用) # 注释内容(MySQL独有)多行注释 /* 注释内容 */ 2 语句 数据库 -- 查…...
【Tool】虚拟机安装与调试与设置与主机共享文件
前言 安装了vm17,实现了与主机文件共享, 步骤 下载虚拟机(试用版) Download VMware Workstation Pro 双击安装 暂不激活或者 使用如下激活码 KRNJX-22GXY-HCW46-MWYHY-YWRDB RDHTN-YFFKY-8YVR7-Q996Y-K74X3 N2XRH-GCH84-MV…...
Spring中的接口使用
技术主题 在我们的项目中,经常会使用一些注解,注解带给我们代码简洁,本质是用于在代码中添加元数据信息,从而实现更加灵活、高效和可维护的代码结构。 技术原理 注解一@Target(ElementType.TYPE) 这个注解表示被它修饰的注解可以应用在类、接口、枚举等类型上。换句话说…...
爬虫017_urllib库_get请求的quote方法_urlencode方法_---python工作笔记036
按行来看get请求方式 比如这个地址 上面这个地址复制粘贴过来以后 可以看到周杰伦变成了一堆的Unicode编码了 所以这个时候我们看,我们说https这里,用了UA反爬,所以这里 我们构建一个自定义的Request对象,里面要包含Us...
Http、SSE、Websocket的区别
从传输方向上看 http是客户端发送请求,然后服务端进行响应的单向通道网络传输协议; SSE( Server-sent Events )则相反,只能是服务器向客户端发送消息,如果客户端需要向服务器发送消息,则需要一…...
【资料分享】全志科技T507工业核心板硬件说明书(一)
目 录 前言 1硬件资源 1.1CPU 1.2ROM 1.3RAM 1.4时钟系统 1.5电源 1.6LED...
JavaScript类
JavaScript 类(class) 类是用于创建对象的模板。 我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。 每个类中包含了一个特殊的方法 constructor(),它是类…...
One-4-All: Neural Potential Fields for Embodied Navigation 论文阅读
论文信息 题目:One-4-All: Neural Potential Fields for Embodied Navigation 作者:Sacha Morin, Miguel Saavedra-Ruiz 来源:arXiv 时间:2023 Abstract 现实世界的导航可能需要使用高维 RGB 图像进行长视野规划,这…...
【ES】笔记-函数参数默认值
函数参数默认值 ES6 允许给函数参数赋值初始值 1. 形参初始值 具有默认值的参数,一般放到最后 function add(a,b,c10){return abc}let resultadd(1,2);console.log(result);2. 与解构赋值结合 function connect({host"127.0.0.1",username,password,port…...
安装harbor
目录 1. 安装docker-compose Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排。使用前面介绍的Dockerfile我们很容易定义一个单独的应用容器。然而在日常开发工作中,经常会碰到需要多个容器相互配合来完成某项任务的情况。例…...
kube-prometheus 使用 blackbox-exporter 进行icmp 监控
安装kube-prometheus 后默认在monitoring namespace中有创建 blackbox-exporter deployment。但默认没有icmp的module配置,无法执行ping探测。因为即使有icmp module,默认配置也是无法执行ping探测的(这篇文章要解决的就是这个问题࿰…...
【python技巧】文本文件的读写操作
【python技巧】文本文件的读写操作 0. 背景1. file库的文件操作1.1 打开文件---file.open()1.2 读取文件---file.read()1.3 写入文件---file.write()1.4 查找内容---file.seek() 2. re库的文本处理参考资料 0. 背景 最近在写后端接口的时候,需要对.c、.conf等类型的…...
SpringBoot项目(验证码整合)——springboot整合email springboot整合阿里云短信服务
目录 引出springboot整合email配置邮箱导入依赖application.yml配置email业务类测试类 springboot整合阿里云短信服务申请阿里云短信服务测试短信服务获取阿里云的accessKeyspringboot整合阿里云短信导包工具类 总结 引出 1.springboot整合email,qq邮箱,…...
缓存穿透,击穿,雪崩之间的区别与联系
1、缓存数据基本流程 通常来说,我们是从数据库将数据查询出来之后,如果数据不为空,则将数据存储在缓存中,下次查询时就直接从缓存查询了,只有查询不到才会从数据库查询。 2、缓存穿透 核心在穿透两个字,穿透了,就说明在查询数据时没有遇到阻碍,直接就查询到了数据库。…...
Vue项目npm run dev 启动报错TypeError: Cannot read property ‘upgrade‘ of undefined
vue项目启动报错 TypeError: Cannot read property upgrade of undefined 由于我的vue.config.js文件 里面的代理target为空导致的 修改: 结果就可以正常运行了 参考原文: vue项目运行时报Cannot read property ‘upgrade’ of undefined错误_cannot r…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
