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全局组件,具体呈现图如下:
相关推荐
前端小巷子几秒前
最长递增子序列:从经典算法到 Vue3 运行时核心优化
前端·vue.js·面试
冰糖雪梨dd38 分钟前
vue在函数内部调用onMounted
前端·javascript·vue.js
老华带你飞3 小时前
校园二手书交易|基于SprinBoot+vue的校园二手书交易管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·校园二手书交易管理系统
萌程序.3 小时前
创建Vue项目
前端·javascript·vue.js
linweidong3 小时前
Vue前端国际化完全教程(企业内部实践教程)
前端·javascript·vue.js·多语言·vue-i18n·动态翻译·vue面经
泉城老铁4 小时前
VUE2实现加载Unity3d
前端·vue.js·unity3d
Cold吃不住4 小时前
TinyMCE 免费版也能很好用:Vue3 富文本编辑器最佳实践
前端·vue.js
麦麦大数据4 小时前
百度地图+vue+flask+爬虫 推荐算法旅游大数据可视化系统Echarts mysql数据库 带沙箱支付+图像识别技术
vue.js·机器学习·flask·可视化·推荐算法·旅游大数据
小林rush6 小时前
Vue3响应式系统设计与实现
前端·vue.js·前端框架
计算机程序员小杨6 小时前
计算机毕设选题:电子商务供应链大数据分析系统Python+Django技术实现详解|毕设|计算机毕设|程序开发|项目实战
java·vue.js·python