雪碧图的展示和选择

 

 

<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>