Vue3DraggableResizable-例子1

最新推荐文章于 2024-12-27 07:30:00 发布

bluejad

最新推荐文章于 2024-12-27 07:30:00 发布

阅读量200

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/bluejad/article/details/138498989

本文介绍了一段Vue3代码，展示了如何在网页中使用`Vue3DraggableResizable`组件创建可拖动且可根据内容自适应大小的红色和蓝色矩形元素，实现灵活的DOM布局管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
    <div class="parent">
      <DraggableContainer>
        <Vue3DraggableResizable :parent="true">
          <div style="width:200px;height:40px;background:red;">Test</div>
        </Vue3DraggableResizable>
        <Vue3DraggableResizable :parent="true">
          <div style="width:100px;height:40px;background:blue;">Another test</div>
        </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>

<script setup>
</script>

<style>
.parent {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}
</style>