浅析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 相关文章推荐
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
javascript的几种写法总结
Sep 30 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php类自动加载器实现方法
2015/07/28 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
javascript数组克隆简单实现方法
2015/12/16 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
django Serializer序列化使用方法详解
2018/10/16 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python中print函数简单使用总结
2019/08/05 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
高中班长自我鉴定
2013/12/20 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
社团活动总结书
2014/06/27 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书