@vuecomp/vue-svg

一款适合vue2.x的浏览器端svg操作组件，包括生成单svg元素、带svg背景的div和弹性svg背景的div

安装

# npm
npm install @vuecomp/vue-svg

# yarn
yarn add @vuecomp/vue-svg

使用

组件内注册

import { vue-svg }  from '@vuecomp/vue-svg' 
components: {
  VueCropper
}

全局注册

// main.js
import VueSvg from '@vuecomp/vue-svg'
Vue.use(VueSvg)

使用

// $withBase为获取资源绝对路径的方法, loadSvg为读取文件的方法，可为异步方法
<VueSvg :src="$withBase('/img/bg.svg')" :fileLoader="loadSvg"></VueSvg>

属性

| Property | Description | Type | Params | Default | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | --------------- | ------------- | | src | svg文件地址，请传入已解析过的绝对地址 | string | - | '' | | beforeRender | 钩子函数，生成dom对象但还未渲染到页面时执行,会将svgDom和vue实例作为参数传入 | function | svgDom,vm | null | | afterRender | 渲染元素渲染完成但尚未显示(透明状态)时执行，会将svgDom和vue实例作为参数传入 | function | svgDom,vm | null | | width | 宽度,px数值或百分比值字符串 | number/string | - | '100%' | | height | 高度,px数值或百分比值字符串 | number/string | - | '100%' | | content | 直接传入svg的html内容用于动态生成svg元素 | string | - | '' | | fileLoader | 导入svg文件的异步方法 | async function | - | async () =>'' | | value | 需要修改元素内容的配置列表，每一项为选择器和内容值，使用innerHTML方式修改{ selector: '.textM', // 选中css类为textM的元素 value: '100' // 修改其内容为100} | array | - | [] | | percentAnimations | 百分比动画配置列表，每一项为选择器和动画停止的百分比，百分比如果大于1则会除以100后再进行计算即传入0.95和传入95是同样的效果，最终修改的对象为animate元素的to属性值{ selector: '.completed', // 选中css类为completedtext的元素 value: 0.95 // 百分比} | array | - | [] | | percentChildren | 以百分比值设置子元素可见性表现动画的配置列表，每一项为选择器和百分比值，按百分比值确定显示的子元素数量(opacity=1){ selector: '.completed', // 选中css类为completedtext的元素 value: 0.95 // 百分比} | array | - | [] | | classNames | 要修改css类的元素配置列表，{ selector: '.item-value', // 选择器 value: '--iscomplete --green' // 要附加的样式类} | array | - | [] | | attrList | 要修改的元素属性配置列表{ selector: '.item-value', // 选择器 prop: 'fill', // 属性名 value: '#ff0', // 属性值 type: '', // 如果要删除属性，传入'delete'，否则为修改} | array | - | [] | | centerText | 是否需要居中文本 | boolean | - | true | | centerTextSelector | 居中文本的样式类选择器 | string | - | '.text-m' | | countTo | 翻牌数字配置，当只有1个元素需要翻牌时可只传入该元素的配置对象，否则传入配置对象列表 | Object/Array | - | null | | duration | 统一设置动画时长毫秒，在各配置项中设置的duration将覆盖本设置 | number | | 3000 | | autoPlay | 渲染完成后开始动画（翻牌、百分比动画） | boolean | - | false | | id | 标记，可用于调试时显示 | string | - | '' | | debug | 是否开启debug模式，开启将打印console信息 | boolean | - | false |