首页 > 其他分享 >vue2当中使用svg

vue2当中使用svg

时间:2024-03-29 14:55:05浏览次数:19  
标签:封装 vue2 svg 文件夹 当中 使用

1、引入依赖
npm install  svg-sprite-loader -D
2、在src文件夹下新建文件夹存放svg图

 3、封装公共svg组件

 3、全局注册使用(避免使用时还需要再去引入封装的svg组件)

 4、在vue.config.js 当中增加svg 配置

 5、使用用例

 



标签:封装,vue2,svg,文件夹,当中,使用
From: https://www.cnblogs.com/xia-chen/p/18103860

相关文章

  • 使用fabric.js框选图片区域并生成svg图
    仍然是在图片上特定区域根据数值显示不同的颜色的需求,改进下代码。增加了测量辅助线、对齐辅助线、生成svg图等,基本满足需求。demo中包括了生成json、svg字符串和下载svg图。<scriptsrc="../plugins/fabric.min.js"></script><scriptsrc="../plugins/aligning_guidelines.......
  • SVG描边 - CSS3实现动画绘制矢量图
    使用SVG的stroke-dasharray及stroke-dashoffset,结合CSS3animation实现画笔绘制矢量图的动画效果,如下:html<svgxmlns="http://www.w3.org/2000/svg"pointer-events="none"class="leaflet-zoom-animated"width="1452"heigh......
  • svg中viewbox图解分析
     svg中有一个viewbox属性,中文翻译为视区,就是在svg上截取一小块,放大到整个svg显示。这个属性初学的话有点难以理解,这边做一个简单的示例,一看就明白了。1)先来一个svg,宽高各位300,设置一下边框:<svgwidth="300"height="300"style="border:1pxsolidsteelblue"></svg>......
  • Day53:WEB攻防-XSS跨站&SVG&PDF&Flash&MXSS&UXSS&配合上传&文件添加脚本
    目录MXSSUXSS:UniversalCross-SiteScriptingHTML&SVG&PDF&SWF-XSS&上传&反编译(有几率碰到)SVG-XSSPDF-XSSPython生成XSSFlash-XSS知识点:1、XSS跨站-MXSS&UXSS2、XSS跨站-SVG制作&配合上传3、XSS跨站-PDF制作&配合上传4、XSS跨站-SWF制作&反编译&上传XSS......
  • 将markmap生成的svg脑图转为png并下载
    将markmap生成的svg脑图转为png并下载markmap是一个非常方便的库,可以直接将md格式转为思维导图。在开发过程中我发现,目前没有将markmap生成的脑图转为png格式保存的代码或是插件。以下是我给出的解决方案这是一段svg标签,用来生成markmap的容器,具体生成的代码不多赘述。<divc......
  • vue2和vue3的主要区别#记录
    一、 vue2和vue3的区别1、vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5的一个API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3 中使用了es6的 ProxyAPI对数据代理。相比于vue2.x,使用proxy的优势如下de......
  • vue2 defineComponent 自定义组件的强大功能
    完全可以通过向defineComponent()传入一个选项式API所定义的object,来定义一个组件,并包含各种响应式功能;如下About组件所示:<scriptsetup>import{ref,computed,defineComponent}from'vue'constHome=defineComponent({template:`<h1>Home</h1>`})constAbo......
  • vue2安装常见组件、配置、使用
    一、网络请求【axios】1、安装:[email protected]、全局注册main.js中//导入axiosimportaxiosfrom"axios";//配置请求后端路径=IP:端口号/apiaxios.defaults.url='http://127.0.0.1:8888/';//将axios设置为Vue的原型属性,这样在组件中就可以通过......
  • vue2 在 main.js 中定义全局函数,在二次封装的 api\index.js 中引用全局函数 GPT4 Tur
    在Vue2中,你可以通过Vue的原型系统来定义全局函数,然后在整个应用的任何组件中使用这些函数。同样,你也可以在其他JavaScript文件中使用这些函数,比如你提到的二次封装的API文件。下面是如何实现这一过程的步骤:###第一步:在`main.js`中定义全局函数在Vue项目的入口文件`main.js`中,你......
  • vue2.0是如何监听双向绑定的?
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><style>.contanier{width:300px;height:300px;......