javascript - 使用 vue 动态生成的图像数量有限

Question

我想制作一个随机定位图标的 div，这就是我到目前为止所做的。我们能不能让它只生成有限数量的图像，比如 20 张图像，而不是无限的。

如果您有更好的方法来制作这样的东西，那么我将非常感激。

谢谢

let nextId = 20

new Vue({
  el: '#app',
  data() {
    return {
      images: [
        '//placekitten.com/200/200',
        '//placekitten.com/200/201',
        '//placekitten.com/200/202',
        '//placekitten.com/200/203',
        '//placekitten.com/200/204',
      ],
      addedImage: [],
      imgTop: -100,
      imgLeft: -100,
      imgHeight: 64,
      imgWidth: 64,
      changeInterval: 10,
      selectedImage: ''
    }
  },
  created() {
    this.randomImage();
    const randomImg = func => setInterval(func, this.changeInterval);
    randomImg(this.randomImage);
    randomImg(this.addImage);
    randomImg(this.randomPosition);
  },
  methods: {
    randomImage() {
      const idx = Math.floor(Math.random() * this.images.length);
      this.selectedImage = this.images[idx];
    },
    randomPosition() {
      const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
      this.imgTop = randomPos(window.innerHeight - this.imgHeight);
      this.imgLeft = randomPos(window.innerWidth - this.imgWidth);
    },
    addImage(){
      this.addedImage.push({
        style: {
          top: `${this.imgTop}px`,
          left: `${this.imgLeft}px`,
          height: `${this.imgHeight}px`,
          width: `${this.imgWidth}px`
        },
        src: this.selectedImage,
        id: nextId++
        
      });
    },
  }
})

.image {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :style="image.style" class="image" :key="image.id" :src="image.src" v-for="image in addedImage">
</div>

标签： javascriptvue.js

Answer 1

为总数、当前计数和间隔参考引入变量：

limit: 20,
counter: 0,
interval: null

将三个调用合并setInterval为一个并存储间隔。

created() {
  this.interval = setInterval(() => {
    this.randomImage();
    this.randomPosition();
    this.addImage();
    this.counter++;
    if (this.counter === this.limit) {
      clearInterval(this.interval);
    }
  }, this.changeInterval);
},

每次调用都会增加计数器，当达到限制时，会清除间隔。这是一个演示：

let nextId = 20

new Vue({
  el: '#app',
  data() {
    return {
      images: [
        '//placekitten.com/200/200',
        '//placekitten.com/200/201',
        '//placekitten.com/200/202',
        '//placekitten.com/200/203',
        '//placekitten.com/200/204',
      ],
      addedImage: [],
      imgTop: -100,
      imgLeft: -100,
      imgHeight: 64,
      imgWidth: 64,
      changeInterval: 10,
      selectedImage: '',
      limit: 20,
      counter: 0,
      interval: null
    }
  },
  created() {
    this.interval = setInterval(() => {
      this.randomImage();
      this.randomPosition();
      this.addImage();
      this.counter++;
      if (this.counter === this.limit) {
        clearInterval(this.interval);
      }
    }, this.changeInterval);
  },
  methods: {
    randomImage() {
      const idx = Math.floor(Math.random() * this.images.length);
      this.selectedImage = this.images[idx];
    },
    randomPosition() {
      const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
      this.imgTop = randomPos(window.innerHeight - this.imgHeight);
      this.imgLeft = randomPos(window.innerWidth - this.imgWidth);
    },
    addImage(){
      this.addedImage.push({
        style: {
          top: `${this.imgTop}px`,
          left: `${this.imgLeft}px`,
          height: `${this.imgHeight}px`,
          width: `${this.imgWidth}px`
        },
        src: this.selectedImage,
        id: nextId++
      });
    },
  }
})

.image {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :style="image.style" class="image" :key="image.id" :src="image.src" v-for="image in addedImage">
</div>