vue2 封装调用组件

一、创建组件
  1. 添加个vue文件,就是你的组件
    在这里插入图片描述
  2. 在这个组件里完善你要的组件样子、功能。
    在这里插入图片描述

二、调用组件

要哪个页面里显示这个组件就去哪个页面文件引入组件。
举个例子:我就在HelloWorld页面展示ADD组件的内容,所以我在HelloWorld.vue文件里调用了就。
3 个步骤:导入组件注册组件调用组件
在这里插入图片描述


效果出来了,如图:
在这里插入图片描述


全局批量封装组件及调用:https://blog.youkuaiyun.com/qq_42618566/article/details/104396886

<think>好的,我现在需要在Vue 2封装一个可复用的SVG组件。首先,我需要了解用户的具体需求,他们可能希望在所有组件中方便地引入自定义的SVG图标,避免重复代码,并且能够通过属性控制SVG的样式和行为。 根据引用[2]中的内容,Vue 3项目中使用的是在main.ts导入svg配置文件,并使用了virtual:svg-icons-register。但Vue 2的配置可能有所不同,我需要调整这个方法以适应Vue 2的环境。首先,可能需要使用vue-cli或者webpack进行配置,因为Vue 2通常配合这些工具。 接下来,我需要考虑如何将SVG文件转换为Vue组件。一个常见的方法是使用vue-svg-loader,这样可以直接将SVG文件作为Vue组件导入。安装这个loader后,配置webpack来处理.svg文件,这样在代码中就可以直接引入SVG文件作为组件使用。 然后,全局注册这个组件,以便在任何地方使用。类似于引用[3]中封装高德地图组件的方式,可能需要在入口文件(如main.js)中全局注册封装好的SVG组件,这样就不需要在每个组件中单独引入了。 另外,考虑到可复用性,应该允许通过props传递属性,比如颜色、大小等。这样用户在使用组件时可以自定义样式。例如,组件接收size和color这两个props,然后动态绑定到SVG元素的属性上。 还需要处理SVG的viewBox属性,确保图标在不同尺寸下正确缩放。同时,要注意SVG内部的stroke或fill颜色是否会被外部传入的color覆盖,可能需要使用CSS的currentColor来继承外部颜色。 在封装过程中,可能遇到webpack配置的问题,特别是如果项目是用vue-cli创建的,可能需要通过vue.config.js来修改webpack配置,添加对svg文件的处理规则,排除原本的file-loader处理,应用vue-svg-loader。 测试时,创建一个测试组件,传入不同的size和color,检查SVG是否正确渲染,样式是否生效。同时,要确保全局注册的组件在任意地方都可以使用,无需单独导入。 最后,总结步骤:安装依赖、配置webpack、创建SVG组件、全局注册、使用组件。同时,提供示例代码和注意事项,比如避免内联样式冲突,推荐使用props控制样式,保持组件的灵活性和可维护性。</think>### 在 Vue 2封装可复用的 SVG 组件 #### 1. **安装依赖** 首先需要安装 `vue-svg-loader` 和 `svg-inline-loader`,用于将 SVG 文件转换为 Vue 组件: ```bash npm install vue-svg-loader svg-inline-loader --save-dev ``` #### 2. **配置 Webpack** 在 `vue.config.js` 中添加以下配置(若无此文件需新建): ```javascript module.exports = { chainWebpack: (config) => { // 移除默认的 SVG 处理规则 config.module.rules.delete("svg"); // 添加自定义 SVG 处理规则 config.module .rule("svg") .test(/\.svg$/) .use("vue-svg-loader") .loader("vue-svg-loader"); }, }; ``` #### 3. **创建 SVG 组件** 在 `src/components` 下新建 `SvgIcon.vue`: ```vue <template> <svg :class="className" :style="{ width: size, height: size }" v-on="$listeners" aria-hidden="true" > <use :xlink:href="`#${name}`" /> </svg> </template> <script> export default { name: "SvgIcon", props: { name: { type: String, required: true, // SVG 文件名(不带扩展名) }, size: { type: String, default: "1em", // 支持 px/em/rem }, color: { type: String, default: "currentColor", // 继承父级颜色 }, }, computed: { className() { return `svg-icon ${this.color}`; }, }, }; </script> <style scoped> .svg-icon { vertical-align: middle; fill: currentColor; // 通过 CSS 继承颜色 } </style> ``` #### 4. **全局注册组件** 在 `main.js` 中全局注册组件: ```javascript import Vue from "vue"; import SvgIcon from "@/components/SvgIcon.vue"; Vue.component("SvgIcon", SvgIcon); ``` #### 5. **使用 SVG 图标** 1. **存放 SVG 文件**:将 SVG 文件放入 `src/assets/svg` 目录(例如 `arrow.svg`) 2. **在组件调用**: ```vue <template> <div> <SvgIcon name="arrow" size="24px" color="#ff0000" /> </div> </template> ``` #### 最佳实践 - **统一管理 SVG**:使用 Webpack 的 `require.context` 自动导入所有 SVG 文件: ```javascript // 在 main.js 中添加 const req = require.context("./assets/svg", false, /\.svg$/); req.keys().forEach(req); ``` - **按需加载**:若需优化性能,可通过动态导入实现按需加载[^2] - **样式隔离**:通过 `currentColor` 实现颜色继承,避免样式冲突[^3] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级码吏

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值