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全局组件,具体呈现图如下:
相关推荐
洛可可白1 天前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
四月_h1 天前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
正义的大古1 天前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
533_1 天前
[element-plus] el-select 下拉选择图片
vue.js
千叶寻-1 天前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
小*-^-*九1 天前
Electron vue项目 打包 exe文件2
javascript·vue.js·electron
若无_1 天前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js
ikun778g1 天前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan20151 天前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron