基于Vue实现可拖动对话框组件

最新推荐文章于 2025-03-12 15:18:49 发布

原创

最新推荐文章于 2025-03-12 15:18:49 发布 · 915 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript #html #python

本文分享了在项目中使用Vue自封装可拖动对话框组件的过程，详细阐述了代码实现步骤，适用于Vue.js开发中缺少相应组件的情况。

基于Vue实现可拖动对话框组件

前言
一、代码实现
总结

前言

近期项目中要用到可拖动对话框组件，由于项目使用的组件库element-ui中并未提供该组件，故笔者只能自己动手封装，本文将详细封装过程分享给大家。

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码实现

代码如下（示例）：

<template>
  <el-container ref="dialog" v-show="dialogShow" :style="{'width': width}">
    <el-header ref="header">
      <div class="el-dialog-header" @mousedown="mousedown">
        <div class="el-dialog-title left-align">
          <span>{
   
   {
   
   title}}</span>
        </div>
        <div class="right-align">
          <i class="el-icon-close cursor-pointer" @click="closeDialog"></i>
        </div>
      </div>
    </el-header>
    <el-main>
      <slot></slot>
    </el-main>
    <div class="el-dialog-footer">
      <slot name="footer"><