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全局组件,具体呈现图如下:
相关推荐
飞翔的佩奇2 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的经方药食两用服务平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·经方药食两用平台
故事与九4 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
桃桃乌龙_952711 小时前
vue-demi打通pnpm替换npm导致的pinia使用问题
前端·vue.js
Linsk11 小时前
前端开发:不处理浏览器兼容性,才是最佳的浏览器兼容性处理方式
前端·vue.js·前端工程化
jqq66611 小时前
Vue3脚手架实现(十、补之前配置)
前端·javascript·vue.js
一只小风华~12 小时前
JavaScript 定时器
开发语言·前端·javascript·vue.js·web
Chase_______13 小时前
JavaWeb笔记2-JavaScript&Vue&Ajax
开发语言·javascript·vue.js
随便起的名字也被占用16 小时前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet
天下无贼!17 小时前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
知识分享小能手17 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3