vue svg放大缩小组件_Vue组件，用于自定义您的svg文件

vue svg放大缩小组件

vue-svg-filler (vue-svg-filler)

Vue component for customize your svg file.

Vue组件，用于自定义您的svg文件。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install vue-svg-filler --save

用法 (Usage)

import SvgFiller from 'vue-svg-filler'

Vue.component('svg-filler', SvgFiller)

🚨请注意！ (🚨 Please note that !)

1. Your svg file must only contain in /static directory

   您的svg文件只能包含在/static目录中

2. path must be full path e.g. static/icon.svg or /static/icon/file.svg , Can't use ../ or ./

   path必须是完整路径，例如static/icon.svg或/static/icon/file.svg ，不能使用../或./

<svg-filler path="static/PATH/OF/YOUR/FILE.svg"/>

示例目录结构 (Example directory structure)

my-project
├── ...
│
├── src
├── static
│   ├── icon
│   │    └── graph.svg
│   ├── account.svg
│   └── alert.svg
│
└── ...

例 (Example)

使用简单 (Simple usage)

<svg-filler path="static/github.svg"/>

自定义填充和大小 (Custom fill & size)

<svg-filler path="static/icon/bitcoin.svg" fill="#FF9900" width="50px" height="50px"/>

请点击 (Click)

<template>
  <div>
    <svg-filler path="static/icon/palette.svg"
      :fill="svgPalette.fill"
      :width="svgPalette.width"
      :height="svgPalette.height"
      @click="svgPalette.fill = randomColor()"/>
    <h2 :style="{ 'color': svgPalette.fill }">{{ svgPalette.fill }}</h2>
    <span>Click icon for change color</span>
  </div>
</template>

<script>
import SvgFiller from 'vue-svg-filler'

export default {
  name: 'app',
  data () {
    return {
      svgPalette: {
        fill: '#c2f91d',
        width: '150px',
        height: '150px'
      }
    }
  },
  methods: {
    randomColor () {
      return `#${(Math.random()*0xFFFFFF<<0).toString(16)}`
    }
  },
  components: {
    SvgFiller
  }
}
</script>

徘徊 (Hover)

<template>
  <div>
    <svg-filler path="static/vuejs.svg"
      :hover-color="svgVuejs.hoverColor"
      :fill="svgVuejs.fill"
      :width="svgVuejs.width"
      :height="svgVuejs.height"/>
    <div>Hover me !</div>
  </div>
</template>

<script>
import SvgFiller from 'vue-svg-filler'

export default {
  name: 'app',
  data () {
    return {
      svgVuejs: {
        fill: this.randomColor(),
        width: '150px',
        height: '150px',
        hoverColor: this.randomColor()
      }
    }
  },
  components: {
    SvgFiller
  }
}
</script>

选件 (Options)

道具 (Props)

Props	Type	Default	Description
path	String	-	Path of your svg file in /static
width	String	24px	Width
height	String	24px	Height
fill	String	#000	Fill color
hover-color	String	-	Fill color when hover on icon
click	Function	-	Triggers when click

道具	类型	默认	描述
路径	串	--	SVG文件在/static路径
宽度	串	24像素	宽度
高度	串	24像素	高度
填	串	＃000	填色
悬停颜色	串	--	将鼠标悬停在图标上时填充颜色
点击	功能	--	点击时触发

大事记 (Events)

Name	Type	Description
[any].native	event: $event	Listen to any native event, e.g. click.native

名称	类型	描述
[any] .native	事件：$ event	收听任何本地事件，例如click.native

在本地运行演示。 (Run demo in local.)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

翻译自: https://vuejsexamples.com/vue-component-for-customize-your-svg-file/

vue svg放大缩小组件