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…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
协议转换利器,profinet转ethercat网关的两大派系,各有千秋
随着工业以太网的发展,其高效、便捷、协议开放、易于冗余等诸多优点,被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口,具有实时性、开放性,使用TCP/IP和IT标准,符合基于工业以太网的…...
Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...
