feat:弹框组件

+.dialogBox {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #FFFFFF;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
+
+    .dialog_title {
+        display: flex;
+        position: relative;
+        top: -2px;
+
+        b {
+            flex: 1;
+            width: 100%;
+            @flex-center();
+        }
+    }
+
+    .el-dialog__header {
+        height: 50px;
+        background: #FCFDFD;
+        border-radius: 4px 4px 0 0;
+        position: relative;
+    }
+
+    .dialog_full {
+        position: absolute;
+        top: 0;
+        right: 6%;
+    }
+
+    .el-dialog__body {
+        max-height: 88vh;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .dialog_footer {
+        flex-direction: column;
+
+        .dialog_button {
+            margin-top: 8px;
+        }
+    }
+}
+
+.el-dialog__wrapper {
+    overflow: hidden;
+}
\ No newline at end of file

+<template>
+  <el-dialog :visible.sync="dialogVisible" v-dialogDrag :width="width" @close="closeDialog('ruleForm', !showEnter)"
+    :fullscreen="fullscreen" top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false"
+    custom-class="dialogBox" :destroy-on-close="true" :class="[customClass]" id="dialogBox" ref="dialogBox">
+    <div slot="title" class="dialog_title" ref="dialogTitle">
+      <b>{{ title }}</b>
+      <div v-if="isFullscreen" class="dialog_full">
+        <i class="el-icon-rank" v-if="fullscreen" @click="handleFullscreen"></i>
+        <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
+      </div>
+    </div>
+    <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
+      <slot></slot>
+    </div>
+    <div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton">
+      <div class="dialog_button" v-if="normal">
+        <el-button @click="closeDialog('ruleForm',)" v-if="isReset && !isSave && showEnter">确定</el-button>
+        <el-button @click="closeDialog('ruleForm', showEnter)" v-if="isReset">取消</el-button>
+        <el-button type="primary" plain @click="submitForm('ruleForm')" v-if="isSave" :loading="saveloding">
+          {{ saveButton }}</el-button>
+
+      </div>
+      <div class="dialog_button" v-else>
+        <el-button @click="closeDiaActivity(true)">确定</el-button>
+        <el-button @click="closeDiaActivity(false)">取消</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    activity: {
+      type: Boolean,
+      default: false,
+    },
+    normal: {
+      type: Boolean,
+      default: true,
+    },
+    showEnter: {
+      type: Boolean,
+      default: true,
+    },
+    isButton: {
+      type: Boolean,
+      default: true,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: '70%',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    customClass: {
+      type: String,
+      default: '',
+    },
+    topHeight: {
+      type: String,
+      default: '0',
+    },
+    isFullscreen: {
+      type: Boolean,
+      default: true,
+    },
+    isSave: {
+      type: Boolean,
+      default: true,
+    },
+    saveButton: {
+      type: String,
+      default: '提交',
+    },
+    isReset: {
+      type: Boolean,
+      default: true,
+    },
+    saveloding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      key: 0,
+      dialogVisible: false,
+      fullscreen: false,
+      scrollerHeight: '',
+    }
+  },
+  methods: {
+    isShow () {
+      this.dialogVisible = true
+    },
+    isHide () {
+      this.dialogVisible = false
+      this.key++
+    },
+    handleFullscreen () {
+      this.fullscreen = !this.fullscreen
+      let height = document.getElementById('dialogBox').clientHeight
+      if (!this.fullscreen) {
+        this.scrollerHeight = false
+      } else {
+        this.scrollerHeight = (window.innerHeight - 180) + 'px'
+      }
+    },
+    submitForm (ruleForm) {
+      if (!this.multiple) {
+        this.$parent.submitForm(ruleForm)
+      } else {
+        this.$emit('submitForm', ruleForm);
+      }
+    },
+    closeDialog (ruleForm, flag) {
+      console.log(456789, this.multiple)
+      this.key++
+      if (!this.multiple) {
+        if (this.$parent.closeDialog) {
+          // console.log(1)
+          this.$parent.closeDialog(ruleForm)
+        } else {
+          // console.log(2)
+          this.dialogVisible = false;
+        }
+      } else {
+        this.$emit('closeDialog', ruleForm, flag);
+      }
+    },
+    closeDiaActivity (flag) {
+      this.$emit('closeDialog', flag);
+    }
+  },
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" >
+@import "./dialogBox.scss";
+</style>
\ No newline at end of file

+import dialogBox from './dialogBox.vue'
+export default {
+  install: (Vue) => {
+    Vue.component('dialogBox', dialogBox);
+  }
+}
\ No newline at end of file

+## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作
+### 使用时在组件中引用 
+ 
+```
+import dialogBox from '@/components/dialogBox/index'
+
+<dialogBox ref="dialog" title="标题">
+    **在这里面写弹框内容** 
+</dialogBox>
+    *在父组件中使用 的按钮提交方法* 
+    submitForm(ruleForm) {
+
+    }
+```
+##### 如果有多个弹框
+
+```
+import dialogBox from '@/components/dialogBox/index'
+
+<dialogBox ref="dialog" @submitForm="自定义方法" title="标题" :multiple="true">
+    **在这里面写弹框内容** 
+</dialogBox>
+    *在父组件中使用 的按钮提交方法* 
+    自定义方法(ruleForm) {
+
+    }
+```
+
+## 打开该dialog：
+this.$refs.dialog.isShow();
+## 隐藏该dialog：
+this.$refs.dialog.isHide();
\ No newline at end of file

@@ -6,7 +6,8 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
 import './styles/element-variables.scss'
 import '@/styles/index.scss' // global css
-import lbTable from './components/lb-table/index';
+import lbTable from './components/lb-table/index'
+import dialogBox from './components/dialogBox/index'
 
 import './image/icons' // icon
 import store from './store'
@@ -15,7 +16,8 @@ import _ from 'lodash'
 
 import * as filters from './filters' // global filters
 Vue.use(Element, { size: 'small' })
-Vue.use(lbTable);
+Vue.use(lbTable)
+Vue.use(dialogBox)
 Object.keys(filters).forEach(key => {
     Vue.filter(key, filters[key])
 })