element-plus 弹窗如何封装实现拖拽和全屏

Element Plus 的弹窗组件 ElDialog 在默认情况下是不可拖拽和全屏的。要实现这两个功能,可以通过以下方式:

实现拖拽

1. 使用 v-slots 将 ElDialog 的 title 插槽传递到组件中
2. 在组件中绑定 mousedown 事件监听, event.preventDefault() 禁止默认事件
3. 在 document 上监听 mousemove 事件获取鼠标移动距离
4. 利用移动距离计算 ElDialog 的左右位置,使用 refs 修改 style 实现拖拽效果

实现全屏

1. 定义 Boolean 类型的 ref 控制是否全屏 fullscreen
2. 使用 computed 获取 ElDialog 的宽高
3. 当全屏时,宽高分别设置为视口宽高
4. 在模板中绑定 fullscreen 控制样式切换

这样就可以实现 Element Plus 的 ElDialog 组件拖拽和全屏功能。更多 CSS 样式可以根据需求自定义。

通过组合 Composition API,可以灵活扩展组件的功能,如拖拽、全屏、自定义关闭逻辑等, making Element Plus 更易用。

最终实现效果如下：

视频加载中...

效果图：

演示地址：Vue Shop Vite