如何解决Vue中iframe拖拽改变div大小时出现的卡顿问题？

本文共计1574个文字，预计阅读时间需要7分钟。

在Vue中实现左右两个div大小的拖动调整：

首先，您可以通过以下步骤在Vue中实现左右两个div大小的拖动调整：

1. 创建一个Vue组件，并在其中添加两个div元素。

2.使用CSS为这两个div设置初始大小和拖动效果。

3.使用JavaScript添加拖动事件监听器，以便在拖动时调整div的大小。

以下是一个简单的示例：

左侧div 右侧div

.draggable { position: absolute; height: 100%; cursor: ew-resize;}

.draggable:hover { cursor: ew-resize;}

在这个示例中，我们创建了两个可拖动的div元素，并使用CSS为它们设置了宽度和拖动效果。JavaScript代码用于处理拖动事件，并调整左右两个div的宽度。

写在最前

针对于在vue中实现拖拽改变两左右个div大小的方式，请查看上一篇文章《vue中实现拖动调整左右两侧div的宽度》。此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题，比如这样，右侧div中使用了一个iframe组件，导致实际操作中出现两个问题，一个是拖不动，另外一个是无法根据鼠标移动，快速响应，甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题。如果去除右侧iframe框架，则没有问题。