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


Posted in Javascript onApril 27, 2020

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

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

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

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

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

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

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组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
js实现模拟购物商城案例
May 18 Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
You might like
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
简述vue中的config配置
2018/01/23 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
用Python进行TCP网络编程的教程
2015/04/29 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
购房协议书范本
2014/04/11 职场文书
养牛场项目建议书
2014/05/13 职场文书
企业员工薪酬方案
2014/06/04 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
狮子林导游词
2015/02/03 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
公司与个人合作协议书
2016/03/19 职场文书
工程移交协议书
2016/03/24 职场文书
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python