Vue.js —— 图片放大缩小的实现

场景：点击图片 进行预览，跳出一个modal框，可进行放大缩小的操作。

关键：样式 transform

1. CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
2. 给元素动态绑定transform的属性值，通过点击事件去修改

<!-- 预览图片  -->
<template>
  <a-modal :visible="visible" :footer="null" @cancel="handleCancel" wrapClassName="box">
    <div class="head-btn-box">
      <a-button icon="plus" @click="toBIgChange">放大</a-button>
      <a-button icon="minus" @click="toSmallChange">缩小</a-button>
    </div>
    <img
      :src="url"
      alt
      class="img"
      :style="{transform:'scale('+multiples+')'}"
    />
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      url: "",
      multiples: 1,
    };
  },

  props: {},

  components: {},

  created() {},

  computed: {},

  mounted() {},

  methods: {
    show(url) {
      this.visible = true;
      this.url = url;
    },

    handleCancel() {
      this.visible = false;
      this.multiples = 1
    },

    toBIgChange() {
      if (this.multiples >= 2) {
        return;
      }
      this.multiples += 0.25;
    },
    // 缩小
    toSmallChange() {
      if (this.multiples <= 1) {
        return;
      }
      this.multiples -= 0.25;
    },
  },
};
</script>
<style scoprd>
.head-btn-box {
  margin-bottom: 20px;
}
.img {
  width: 200px;
}
.box .ant-modal-body {
  width: 500px;
  overflow-x: auto;
  height: 500px;
  overflow-y: auto;
}
</style>

效果：

第一篇随笔，写的比较简单。