基于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