写一个vue可调整大小的div的代码

当然，我可以为您提供一个Vue中可调整大小的div的代码，代码如下：

<template>
<div
class="resizeable"
:style="{ width: width + 'px', height: height + 'px' }"
>
My resizeable div content.
</div>
</template>

<script>
export default {
data() {
return {
width: 200, // 初始宽度
height: 200 // 初始高度
};
},
mounted() {
const resizeableDiv = document.querySelector('.resizeable');
let isResizing = false;
let lastClientX = 0;
let lastClientY = 0;

resizeableDiv.addEventListener('mousedown', e => {
isResizing = true;
lastClientX = e.clientX;
lastClientY = e.clientY;
});

document.addEventListener('mousemove', e => {
if (!isResizing) {
return;
}

const deltaX = e.clientX - lastClientX;
const deltaY = e.clientY - lastClientY;
this.width += deltaX;
this.height += deltaY;
lastClientX = e.clientX;
lastClientY = e.clientY;
});

document.addEventListener('mouseup', () => {
isResizing = false;
});
}
};
</script>

<style scoped>
.resizeable {
background-color: #eee;
border: 1px solid #ccc;
resize: both;
overflow: auto;
}
</style>

这个代码会渲染一个可调整大小的div，在鼠标拖动div的边缘时，div的大小也随之改变。希望这能对您有所帮助！