Vue dialog模态框的封装

前言

这个是基于vue2的模态框封装，仿照elementUI而写的组件。

效果如图

首先我们需要一个遮罩层

<template>
    <div class="myDialog">
        <div v-if="visable" class="dialog_mask" @click="close"></div>
    </div>
</template>
<style>
  .dialog_mask {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.418);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 122;
  }
</style>

然后是主体部分

      <!-- 模态框内容部分 -->
      <div v-if="visable" class="dialog_window" @mousedown="moveDialog">
        <header>
          <!-- 传入的标题 -->
          <h5>{
  { title }}</h5>
          <!-- x号