组件

src/components/BaseDialog/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="baseDialog">
+    <el-dialog
+      v-el-drag-dialog
+      :visible.sync="dialogShow"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <template #title>
+        <slot name="title">
+          <div class="titleStyle">{{ dialogTitle }}</div>
+        </slot>
+      </template>
+      <slot />
+      <template #footer>
+        <!--对外继续暴露footer插槽，有个别弹框按钮需要自定义-->
+        <slot name="footer">
+          <!--将取消与确定按钮集成到内部-->
+          <el-row slot="footer" type="flex" justify="end">
+            <el-col :span="24">
+              <el-button size="small" class="btnTextStyle" @click="$_handleCancel">取消</el-button>
+              <el-button type="primary" class="btnTextStyle" size="small" @click="$_handleConfirm">
+                确定
+              </el-button>
+            </el-col>
+          </el-row>
+        </slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import elDragDialog from './js/drag'
+export default {
+  inheritAttrs: false,
+  name: 'BaseDialog',
+  directives: { elDragDialog },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    dialogTitle: {
+      type: String,
+      required: true,
+      default: '请填入标题'
+    }
+  },
+  computed: {
+    dialogShow: {
+      get() {
+        return this.dialogVisible
+      },
+      set(val) {
+        this.$emit('update:dialogVisible', val)
+      }
+    }
+  },
+  methods: {
+    $_handleConfirm() {
+      this.$emit('confirm')
+    },
+    $_handleCancel() {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss">
+.baseDialog {
+  .el-dialog__header {
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 500;
+    padding: 13px 24px;
+    border-bottom: 1px solid #e9e9e9;
+    .titleStyle::before{
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 16px;
+      background-color: #0B58FF;
+      border-radius: 1px;
+      margin-right: 8px;
+      position: relative;
+      top: 2px;
+    }
+  }
+  .el-dialog__body {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+  .btnTextStyle {
+    letter-spacing:6px;
+    padding: 9px 10px 9px 16px;
+    font-size: 14px;
+  }
+}
+</style>