vue svg放大缩小组件
vue-svg-filler (vue-svg-filler)
Vue component for customize your svg file.
Vue组件,用于自定义您的svg文件。
安装 (Install)
npm install vue-svg-filler --save
用法 (Usage)
import SvgFiller from 'vue-svg-filler'
Vue.component('svg-filler', SvgFiller)
🚨请注意! (🚨 Please note that !)
Your
svg
file must only contain in/static
directory您的
svg
文件只能包含在/static
目录中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放大缩小组件