这是我的完整源代码(评论不允许我写长字符哈哈)
<template>
<div class="portfolio">
<VueDraggableResizable
@dragging="onDrag"
@resizing="onResize"
:parent="false"
style="border: 1px solid black;"
>
<img
ref="imgRef"
src="../assets/logo.png"
alt="no logo"
width="200px" height="200px"
/>
<h3>Hello World!</h3>
<p>{{ x }} x {{ y }}</p>
<p>{{ width }} x {{ height }}</p>
</VueDraggableResizable>
<div v-for="item in items" :key="item.img" ref="items">
<VueDraggableResizable @dragging="onDrag" @resizing="onResize" :parent="false" style="border: 1px solid black;">
<img ref="imgRef" :src="item.img" alt="no Picutres">
</VueDraggableResizable>
</div>
<input type="file" @change="onFileSelected">
</div>
</template>
<script>
import VueDraggableResizable from '../../node_modules/vue-draggable-resizable'
import '../../node_modules/vue-draggable-resizable/dist/VueDraggableResizable.css'
export default {
components: {
VueDraggableResizable
},
data: () => ({
height: 0,
width: 0,
x: 0,
y: 0,
items: [],
studentID: '2014122177'
}),
methods: {
onResize (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
this.$refs.imgRef.width = width
this.$refs.imgRef.height = height
},
onDrag (x, y) {
this.x = x
this.y = y
},
onFileSelected (e) {
var files = e.target.files || e.dataTransfer.files
if (!files.length) {
return
}
this.createImage(files[0])
},
createImage (file) {
var reader = new FileReader()
var tempImg = {}
reader.onload = (e) => {
tempImg.x = 500
tempImg.y = 200
tempImg.height = 100
tempImg.width = 100
tempImg.img = e.target.result
this.items.push(tempImg)
}
reader.readAsDataURL(file)
}
}
}
</script>