vue3实战项目第一日(学习项目):封装svg全局组件

技术要点

1. SVG 图标容器:

  • 使用 <svg> 标签作为图标容器。
  • 通过 :style 动态绑定宽度和高度。
  • 使用 class="svg-icon" 应用基础样式。

2.use标签的使用

  • <use>标签用于引用 SVG 图标。
  • :xlink:href属性指定图标引用路径。
  • :fill属性控制图标颜色。
  • 具体代码展示图:

3. Props 设计:

  • prefix: 图标前缀,默认 '#icon-'
  • name: 图标名称(必填)。
  • color: 图标颜色(可选)。
  • width/height: 图标尺寸(默认 16px)。
  • 具体代码展示图:
  • 其中name就是svg图标的文件名
  • defineProps 是 Vue 3 组合式 API 中的一个编译器宏,用于定义组件的 props。它是在 <script setup> 中使用的,不需要显式导入。
  • 进行到这一步,组件的封装就差不多结束了。

组件的导出、声明、注册

在同一个文件夹内创建一个index.ts文件

具体文件夹如下:

index.ts主要内容:

  • 1.引入全局对象
javascript 复制代码
//引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
// import Category from './Category/index.vue'
//引入element-plus提供全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  • 2.定义一个全局对象allGloablComponent并且将其暴露出去。
  • 3.不要忘了在main.js中引入自定义插件对象:注册整个项目全局组件。(漏掉这一步骤可能会在浏览器显示不出组件)
  • 4.完成封装一个svg全局组件,具体呈现图如下:
相关推荐
开发者小天5 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
程序员杨工10 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky12 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Pu_Nine_913 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
一个处女座的程序猿O(∩_∩)O13 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
姜至14 小时前
el-calendar实现自定义展示效果
前端·vue.js
拉不动的猪14 小时前
webpack分包优化简单分析
前端·vue.js·webpack
麦麦大数据15 小时前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
麦麦大数据15 小时前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱