版本迭代

src/components/AiDialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <section class="ai-dialog__wrapper">
+    <el-dialog custom-class="ai-dialog" v-on="$listeners" v-bind="$attrs" :visible.sync="dialog">
+      <div class="ai-dialog__header fill" slot="title" v-text="title"/>
+      <div class="ai-dialog__content">
+        <div class="ai-dialog__content--wrapper pad-r8">
+          <slot/>
+        </div>
+      </div>
+      <template v-if="customFooter" slot="footer">
+        <slot name="footer"/>
+      </template>
+      <div v-else class="dialog-footer" slot="footer">
+        <el-button @click="onCancel">取消</el-button>
+        <el-button @click="onConfirm" type="primary">确认</el-button>
+      </div>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: 'AiDialog',
+  model: {
+    prop: "visible",
+    event: "input"
+  },
+  props: {
+    visible: Boolean,
+    title: {type: String, default: ''},
+    customFooter: Boolean
+  },
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+  watch: {
+    dialog(v) {
+      this.visible != v && this.$emit("input", v)
+    },
+    visible(v) {
+      this.dialog = v
+    }
+  },
+  methods: {
+    onCancel() {
+      this.$emit('input', false)
+      this.$emit('update:visible', false)
+      this.$emit('cancel')
+    },
+    onConfirm() {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ai-dialog {
+  margin: unset !important;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .el-dialog__body {
+    padding: 20px 40px 20px;
+  }
+
+  .ai-dialog__content {
+    overflow-y: auto;
+    padding-bottom: 4px;
+    max-height: 500px;
+
+    .ai-dialog__content--wrapper {
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+
+  .ai-dialog__header {
+    flex: 1;
+    height: 48px;
+    line-height: 48px;
+    padding: 0 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 20px;
+    box-sizing: border-box;
+    background: #F3F6F9;
+    text-align: center;
+
+    & + .el-button {
+      margin-left: 8px;
+    }
+
+    .el-button {
+      width: 92px;
+    }
+  }
+
+  .el-dialog__header {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+  }
+
+  .el-dialog__headerbtn {
+    position: relative;
+    flex-shrink: 0;
+    top: unset;
+    right: unset;
+    margin: 0 16px;
+  }
+}
+</style>