vue-add-images-container v1.0.1

vue-add-images-container

friendly picture file input Vue.js component with image preview, drag and drop, CRTL+V, and more.

Installation

npm

npm install --save vue-add-images-container

yarn

yarn add vue-add-images-container

Usage

<template>
  <div id="app">
    <div style="display: flex; flex-wrap: wrap">
      <div v-for="img in newImages" :key="img.id">
        <image-container
          :data="img"
          @delete="removeImage"
          :edit-mode="true"
          :size="'150'"
        />
      </div>
      <add-image-btn
        @paste="addImage"
        :size="'150'"
        @drop="addImage"
        :multipleDragged="true"
      />
    </div>
  </div>
</template>

<script>
import AddImageBtn from "../src/lib-components/AddImageBtn.vue";

export default {
  name: 'app',
  data () {
    return {
        newPlane: null,
        newImages: [],
    }
  },
  components: {
    AddImageBtn
  },
  methods: {
    addImage(imgFile) {
      this.newImages.push({
        src: imgFile.src,
        id: imgFile.src,
        file: imgFile.file,
      });
    },
    removeImage(id) {
      this.newImages.splice(
        this.newImages.findIndex((x) => x.id === id),
        1
      );
    },
  }
}
</script>