目的：现在有一个PDF预览页面，左侧为PDF预览区域，右侧为可以进行AI功能的面板。现在想让AI面板通过拖动左边框实现面板拉伸。

实现效果如下面的视频：

关键点：

1. 预览区是使用iframe渲染的，在拖动的过程中，如果鼠标进入了iframe区域中，会使鼠标事件失效，这里是增加了一个透明遮罩层，这样不会影响预览效果，也不会导致鼠标事件失效 
2. 拉伸的方式是使用了Vue拉伸指令，创建了一个拖拽手柄，绑定@pointdown事件

<div v-show="isResizing" class="iframe-overlay" />

完整代码如下： 

<div class="dragBoxLeft">
    <!-- PDF遮罩层 -->
    <div v-show="isResizing" class="iframe-overlay" />
    <!-- PDF预览区域 -->
    <iframe v-show="!counterStore.pdfViewLoading" :src="pSrc" width="100%" height="100%"    class="ins" id="pdfPreview" sandbox="allow-same-origin allow-scripts" />
</div>

<!-- 拖拽手柄 -->
<div class="resizer" @pointerdown="initResize" />

<!-- AI面板 -->
<div class="dragBoxRight":style="{ width: rightPanelWidth + 'px' }">
    <chatConver />
</div>

const rightPanelWidth = ref(400); // 右侧区域的初始宽度
const isResizing = ref(false); // 标记是否正在拖拽
const minWidth = 400; // 右侧最小宽度
const maxWidth = 700; // 右侧最大宽度
 
// 拖拽相关事件
const initResize = () => {
  isResizing.value = true; // 设置拖拽状态为 true
 
  document.addEventListener('pointermove', resizeRightPanel);
  document.addEventListener('pointerup', stopResize);
};
 
// 动态调整右侧区域的宽度
const resizeRightPanel = (e: PointerEvent) => {
  if (!isResizing.value) return;
 
  const newWidth = window.innerWidth - e.clientX;
  rightPanelWidth.value = Math.min(maxWidth, Math.max(minWidth, newWidth)); // 确保宽度在最小和最大范围内
};
 
// 停止拖拽
const stopResize = () => {
  isResizing.value = false; // 停止拖拽
 
  document.removeEventListener('pointermove', resizeRightPanel);
  document.removeEventListener('pointerup', stopResize);
};
 
// 确保在组件卸载时移除事件监听器
onUnmounted(() => {
  isResizing.value = false; // 停止拖拽
 
  document.removeEventListener('pointermove', resizeRightPanel);
  document.removeEventListener('pointerup', stopResize);
});

.resizer {
  width: 1px;
  cursor: ew-resize;
  background-color: #ddd;
}
 
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  z-index: 10;
}