1、npm i -s vue-drag-resize
2、代码
<!--
* @Author: your name
* @Date: 2021-08-24 16:19:11
* @LastEditTime: 2021-08-24 16:30:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \internetPlatform\src\views\zhangming\systemManage\test4.vue
-->
<template>
<div>
<VueDragResize :is-active="true" :w="200" :h="200" @resizing="resize" @dragging="resize">
<!-- <h3>Hello World!</h3>
<p>{{ top }} х {{ left }}</p>
<p>{{ width }} х {{ height }}</p> -->
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
components: {
VueDragResize,
},
data() {
return {
width: 0,
height: 0,
top: 0,
left: 0,
}
},
methods: {
resize(newRect) {
this.width = newRect.width
this.height = newRect.height
this.top = newRect.top
this.left = newRect.left
},
},
}
</script>
<style lang="scss" scoped></style>