zhgkpt-datav/components/BasicModal/index.vue

<script>
import { Dialog as ElDialog } from "element-ui";

export default {
  name: "BasicModal",
  components: {
    ElDialog,
  },
  data() {
    return {
      visible: false,
    };
  },
  props: {
    top: {
      type: String,
      default: "184px",
    },
    width: {
      type: String,
      default: "1456px",
    }, 
    name: {
      type: String,
      default: "",
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    },
    slotTitle() {
      console.log(this.$slots)
      return "111"
    }
  },
};
</script>

<template>
  <el-dialog
    :append-to-body="this.appendToBody"
    :modal-append-to-body="false"
    :visible.sync="visible"
    :top="top"
    :width="width"
    v-bind="$attrs"
    v-on="$listeners"
    :title="name"
  >
    <slot />
    <span slot="title" v-if="name===''" >
      <slot name="title" ></slot>
    </span>
  </el-dialog>
</template>

<style scoped lang="less">
::v-deep(.el-dialog) {
  background: none;
  color: #fff;
  margin-bottom: 0px;
  .el-dialog__header {
    background-color: #012669ee;
    color: #fff;
    height: 60px;
    box-sizing: border-box;
    border-top: 2px solid #00aaff;
    .el-dialog__title {
      color: #fff;
    }

    .el-dialog__title::before {
      content: "";
      display: inline-block;
      background: url("../assets/modal_header.svg") no-repeat center center;
      width: 9px;
      height: 14px;
      margin-right: 10px;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }

  .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
    background-color: rgba(255, 0, 0, .4);
    padding: 4px;
  }
  .el-dialog__body {
    color: #fff;
    background-color: rgba(3, 18, 57, 0.9);
  }
}
</style>