<template>
<div class="icon-svg">
<div
class="icon-div"
:style="{
width: positions.width + 'px',
height: positions.height + 'px',
'background-position': '-' + positions.x + 'px -' + positions.y + 'px',
}"
></div>
<div class="icon-box">
<div
v-for="(item, index) in imgJson"
:key="index"
@click="clickImg(item)"
class="icon-item"
:style="{
width: item.width + 'px',
height: item.height + 'px',
'background-position': '-' + item.x + 'px -' + item.y + 'px',
}"
></div>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import imgJson from "../assets/icons/osm-liberty.json";
export default {
name: "iconSvg",
data() {
return {
pngUrl: "../assets/icons/osm-liberty.png",
imgJson: imgJson,
positions: {
width: 21,
height: 21,
x: 0,
y: 0,
pixelRatio: 1,
},
};
},
props: {},
computed: {},
mounted() {
console.log(imgJson, "imgJson");
},
methods: {
clickImg(val) {
console.log(val, "val");
this.positions.width = val.width;
this.positions.height = val.height;
this.positions.x = val.x;
this.positions.y = val.y;
},
},
watch: {},
};
</script>
<style scoped>
.icon-svg {
width: 100%;
height: 100%;
}
.icon-box {
width: 400px;
margin: 0px auto;
}
.icon-div {
width: 21px;
height: 21px;
margin: 0px auto;
background-image: url("../assets/icons/osm-liberty.png");
background-position: -0px -0px;
}
.icon-item {
background-image: url("../assets/icons/osm-liberty.png");
display: inline-block;
vertical-align: middle;
}
</style>