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>

 

效果：

 

第一篇隨筆，寫的比較簡單。