Vue-multiple-image-clipping NPM

vue-multiple-image-clipping

A Multiple Image And Clipping Use vue-upload-multiple-image And vuejs-clipper Package for Vuejs NPM Package

Install

NPM / Yarn

Install the package:

npm install vue-multiple-image-clipping
yarn add vue-multiple-image-clipping

need css loader, ex: sass-loader, if you haven't installed :

npm install -D sass-loader node-sass

Then import it in your project

main.js

import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);

import VueMultipleImageClipping from "vue-multiple-image-clipping";

export default {
  components: {
    VueMultipleImageClipping
  }
};

Browser global

<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-multiple-image-clipping.js"></script>

Usage

You can simply view App.vue to see how to use vue-upload-multiple-image

How to use:

<vue-multiple-image-clipping
  @upload-success="uploadImageSuccess"
  @before-remove="beforeRemove"
  @edit-image="editImage"
  :data-images="images"
></vue-multiple-image-clipping>

images has the structure:

[
  {
    path: 'http://example.com/image.jpg',
    pathClipper: 'http://example.com/image.jpg'
    default: 1,
    highlight: 1,
    caption: 'caption to display. receive', // Optional
  }
]

Example

<template>
  <div
    id="my-strictly-unique-vue-upload-multiple-image"
    style="display: flex; justify-content: center;"
  >
    <vue-multiple-image-clipping
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      @data-change="dataChange"
      @limit-exceeded="limitExceeded"
      @limit-dimensions="limitDimensions"
      @limit-size="limitSize"
      :data-images="images"
      idUpload="myIdUpload"
      editUpload="myIdEdit"
      :maxImage="8"
      :maxHeightImage="500"
      :maxWidthImage="500"
      :maxSizeImage="1000000"
    ></vue-multiple-image-clipping>
  </div>
</template>

<script>
  import VueMultipleImageClipping from "vue-multiple-image-clipping";
  import axios from "axios";
  export default {
    name: "app",
    data() {
      return {
        images: []
      };
    },
    components: {
      VueUploadMultipleImage
    },
    methods: {
      uploadImageSuccess(formData, index, fileList) {
        console.log("data", formData, index, fileList);
        // Upload image api
        // axios.post('http://gostore.gostore-api.test/api/items/upload', formData).then(response => {
        //   console.log(response)
        // })
      },
      beforeRemove(index, done, fileList) {
        console.log("index", index, fileList);
        var r = confirm("remove image");
        if (r == true) {
          done();
        } else {
        }
      },
      editImage(formData, index, fileList) {
        console.log("edit data", formData, index, fileList);
      },
      dataChange(data) {
        console.log(data);
      },
      limitExceeded(amount) {
        console.log(amount);
      },
      limitDimensions(fileName, height, width, maxHeightImage, maxWidthImage) {
        console.log(
          fileName,
          height,
          width,
          maxHeightImage,
          maxWidthImage,
          "limitDimensions"
        );
      },
      limitSize(fileName, sizeImage, maxSizeImage) {
        console.log(fileName, sizeImage, maxSizeImage, "limitSize");
      }
    }
  };
</script>

<style>
  #my-strictly-unique-vue-multiple-image-clipping {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>