Question

我想一张一张地缩放图像。但是这段代码现在的工作方式是这样的：我单击图像并一次缩放所有五个图像，然后再单击一次，它们都将缩小。如何解决此问题，以便我可以一一缩放？

       <img src="/images/{{advertisement.img}}" class="mr-3" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
        @click="toggleZoom">

        <img src="/images/{{advertisement.img2}}" class="mr-3" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
        @click="toggleZoom">

        <img src="/images/{{advertisement.img3}}" class="mr-3" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
        @click="toggleZoom">

        <img src="/images/{{advertisement.img4}}" class="mr-3" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
        @click="toggleZoom">

        <img src="/images/{{advertisement.img5}}" class="mr-3" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
        @click="toggleZoom">

VueJS部分。

   new Vue({
        el: '#advertisementManagement', 
        data: {
            isZoomed: false,
            imageWidth: '',
            imageHeight: ''
        },
        methods: {
            zoomIn() {
                this.isZoomed = true;
                this.imageWidth = 300;
                this.imageHeight = 300;              
            },
            zoomOut() {
                this.isZoomed = false;
                this.imageWidth = 100;
                this.imageHeight = 100;                 
            }
        },
        computed: {
        toggleZoom() {
            return this.isZoomed ? this.zoomOut : this.zoomIn;
            }         
        }        
    });

Answer 1

您将不得不将它们抽象为单独的组件，或者至少为每个单独的图像声明一个缩放状态。这是因为this.isZoomed状态存储在图像 all 所在的应用级别上，这意味着每个图像都不会存储其单独的缩放状态。

VueJS使原子设计非常容易：在这种情况下，您的广告图像是原子组件，因为它应该处理自己的状态。这可以通过创建一个自定义组件（例如<ad-image>）来完成，该组件将跟踪图像的各个isZoomed状态及其尺寸：

Vue.component('ad-image', {
  template: '#ad-image',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      width: 300,
      height: 300,
      isZoomed: false
    }
  },
  methods: {
    zoomIn() {
      this.isZoomed = true;
      this.width = 300;
      this.height = 300;
    },
    zoomOut() {
      this.isZoomed = false;
      this.width = 100;
      this.height = 100;
    }
  },
  computed: {
    toggleZoom() {
      return this.isZoomed ? this.zoomOut : this.zoomIn;
    }
  }
});

new Vue({
  el: '#advertisementManagement',
  data: {
    advertisement: {
      img: 'https://via.placeholder.com/300x300',
      img2: 'https://via.placeholder.com/300x300',
      img3: 'https://via.placeholder.com/300x300',
      img4: 'https://via.placeholder.com/300x300'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="advertisementManagement">
  <ad-image :src="advertisement.img" />
  <ad-image :src="advertisement.img2" />
  <ad-image :src="advertisement.img3" />
  <ad-image :src="advertisement.img4" />
</div>

<script type="text/x-template" id="ad-image">
  <img :src="src" class="mr-3" :style="{ width: width + 'px', height: height + 'px' }" @click="toggleZoom" />
</script>

提示：您可以将所有样式绑定抽象为一个计算属性，以免您的VueJS模板出现字符串插值和串联的情况：

<img :src="src" class="mr-3" :style="styleObject" @click="toggleZoom" />

然后在您的JS逻辑中：

computed: {
  toggleZoom() {
    return this.isZoomed ? this.zoomOut : this.zoomIn;
  },
  styleObject() {
    return {
        width: width + 'px',
        height: height + 'px'
    };
  }
}

VueJS一次缩放所有五个图像

1 个答案: