Vuejs一次放大所有五个图像

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>

pro-tip：您可以将所有样式绑定在计算的属性中抽象，这样您就不会用字符串插值和串联来混乱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'
    };
  }
}