0.1.2 • Published 4 years ago
@ali464sh/vue-multiple-image-clipping v0.1.2
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
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-images="images"
idUpload="myIdUpload"
editUpload="myIdEdit"
></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://your-url-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)
}
}
}
</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>