浅析vue cli3 封装Svgicon组件正确姿势(推荐)

2024-04-02 07:41:11

vue cli3 手把手教学封装Svgicon组件

第一步:在src文件下新建一个放置svg文件的文件夹

第二步:在components文件下新建一个Svg组件

这是一个文件夹专门用来存放项目里面需要使用的svg文件，比如 a.svg b.svg …

svg组件源码

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName"></use>
 </svg>
</template>

<script type="text/ecmascript-6">
/* icon组件实现自动引入 ../../Icons/svg 下面所有的图标了
*之后我们就要使用到 webpack 的 require.context。
很多人对于 require.context可能比较陌生，
直白的解释就是require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹（不包含子目录）
下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块*/
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('../../Icons/svg', false, /\.svg$/)
requireAll(req)
export default {
 name: 'Svgicon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName () {
   return `#icon-${this.iconClass}`
  },
  svgClass () {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>

<style>
.svg-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
 }
</style>

第三步:配置vue.config.js

需要的loader
npm i svg-sprite-loader -D

chainWebpack: config => {
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
}

以上就配置完毕

注:未注册组件在人口文件全局注册即可使用(main.js)

到此这篇关于浅析vue cli3 封装Svgicon组件正确姿势(推荐)的文章就介绍到这了,更多相关vue cli3 Svgicon组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue-cli3.x + axios 跨域方案踩坑指北

缘起最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个PHP版的实现,所以想把PHP写的功能整理成一个服务,然后在前端调用.但是这个项目是JavaWeb,也就是说我需要面对跨域的问题.不过本篇文章,讲的并不是如何解决这样的跨域问题,而是我在找如何解决这个问题的路上遇到的坑. 其实,在前端工程化大行其道的现在,前后端已经分离开来,前端为了提高工作流效率往往自己开一个小型的服务器,就比如webpack.devServer.这样在前端调用后端接口的时候必然
vue-cli3配置与跨域处理方法

安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 . npm uninstall vue-cli -g 2. 检查 node.js 版本. vue-cli3 需要 node 版本大于8.9.在cmd中输入 node -v 查看版本.如果版本过低,请先去 node官网中下载高版本. 安装脚手架 vue-cli3的包名有 vue-cli 改为 @vue/cli . 使用npm全局安装vue-cli3. npm inst
Vue-cli3.X使用px2 rem遇到的问题及解决方法

把项目脚手架升级为cli3.X了以后,模板简洁了很多,运行起来也更加快速.但是也随之而来是某些兼容问题.比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前老的脚手架那样操作了.那我们应该来如何设置呢? 首先,我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem --save -dev 然后我们需要在vue.config.js中创建一个配置.由于在vue-cli3.X中.去掉了build和config文件夹.所有的配置都放到
详解Vue-cli3.X使用px2rem遇到的问题

把项目脚手架升级为cli3.X了以后,模板简洁了很多,运行起来也更加快速.但是也随之而来是某些兼容问题.比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前老的脚手架那样操作了.那我们应该来如何设置呢? 首先,我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem --save -dev 然后我们需要在vue.config.js中创建一个配置.由于在vue-cli3.X中.去掉了build和config文件夹.所有的配置都放到了
浅析vue cli3 封装Svgicon组件正确姿势(推荐)

vue cli3 手把手教学封装Svgicon组件第一步:在src文件下新建一个放置svg文件的文件夹第二步:在components文件下新建一个Svg组件这是一个文件夹专门用来存放项目里面需要使用的svg文件,比如 a.svg b.svg - svg组件源码 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconNam
Vue封装svg-icon组件使用教程

目录一.SVG可缩放矢量图形二.SVG在vue项目中的配置与使用一.SVG可缩放矢量图形 SVG(Scalable Vector Graphics)可缩放矢量图形,是一种用于描述基于二维的矢量图形的 XML 标记语言,其基本矢量显示对象包括矩形.圆.椭圆.多边形.直线.任意曲线等,还能显示文字对象和嵌入式外部图像(包括 PNG.JPEG.SVG 等).实际项目中大多数图标都是使用的 SVG 图标文件,其主要有以下几个优点: 1.内容可读,文件是纯粹的 XML. 2.图像文件小,可伸缩性强.
React优雅的封装SvgIcon组件示例

目录 React如何优雅的封装SvgIcon组件第一步:安装svg-sprite-loader 第二步:配置webpack 第三步:创建icons/svg文件夹,并且加载所有svg文件第四步:创建 SvgIcon 组件第五步:在组件中使用 SvgIcon 注意可能会遇到的bug 总结 React如何优雅的封装SvgIcon组件相信使用过vue的伙伴们,或多或少都接触或使用过vue-element-admin,其中许多封装都不禁让人拍案叫绝,因为本人之前是vue入门前端的,所以对vue-e
基于Vue如何封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se
Vue中封装input组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
vue如何使用vue slot封装公共组件

目录使用vue slot封装公共组件使用slot插槽封装使用vue slot封装公共组件公用子组件:publicSlot <div> <div class="top"> <h1 class="title">{{title}}</h1> <slot name="headerRight"> 可以根据你slot nam
如何免费获取 Jetbrain 全家桶使用兑换码的正确姿势(推荐)

自今年1月份以Jetbrain公司严厉打击旗下开发工具产品(如:IntelliJ IDEA.WebStorm.PyCharm等)的盗版破解以来.求新破解方式.分享新破解方法的帖子或信息经常可以在各技术社区或微信社群中看到. 大批 IDEA 激活码到期之后的乱象...一文中介绍了如何通过正常途径继续使用这些开发工具的三种方法. **学生免费:**JetBrains的全线产品对在校学生全部免费开放.所以,你只要有专属于学校的邮箱,就可以注册账号并免费使用它们. **开源免费:**如果您跟我一样,热爱
vue自定义封装按钮组件

vue按钮组件的自定义封装代码,供大家参考,具体内容如下封装按钮组件 button.vue <template> <button class="button ellipsis" :class="[size,type]"> <slot /> </button> </template> <script> export default { name: 'Button', props: { size:
深入浅析Vue不同场景下组件间的数据交流

正文浅谈Vue不同场景下组件间的数据"交流" Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是"方法论",而不是"场景论",这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据"交流"的Vue实现父子组件间的数据交流父子组件间的数据交流可分为两种: 1.父组件传
在vue中封装可复用的组件方法

本次封装的组件以toast组件为例以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构

浅析vue cli3 封装Svgicon组件正确姿势(推荐)

相关推荐

随机推荐