index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <script>
  2. import { Dialog as ElDialog } from "element-ui";
  3. export default {
  4. name: "BasicModal",
  5. components: {
  6. ElDialog,
  7. },
  8. data() {
  9. return {
  10. visible: false,
  11. };
  12. },
  13. props: {
  14. top: {
  15. type: String,
  16. default: "184px",
  17. },
  18. width: {
  19. type: String,
  20. default: "1456px",
  21. },
  22. name: {
  23. type: String,
  24. default: "",
  25. },
  26. },
  27. methods: {
  28. showModal() {
  29. this.visible = true;
  30. },
  31. closeModal() {
  32. this.visible = false;
  33. },
  34. },
  35. };
  36. </script>
  37. <template>
  38. <el-dialog
  39. :append-to-body="false"
  40. :modal-append-to-body="false"
  41. :visible.sync="visible"
  42. :top="top"
  43. :title="name"
  44. :width="width"
  45. v-bind="$attrs"
  46. v-on="$listeners"
  47. >
  48. <slot />
  49. </el-dialog>
  50. </template>
  51. <style scoped lang="less">
  52. ::v-deep(.el-dialog) {
  53. background: none;
  54. color: #fff;
  55. .el-dialog__header {
  56. background-color: rgba(0, 102, 255, 0.26);
  57. color: #fff;
  58. height: 60px;
  59. box-sizing: border-box;
  60. border-top: 2px solid #00aaff;
  61. .el-dialog__title {
  62. color: #fff;
  63. }
  64. .el-dialog__title::before {
  65. content: "";
  66. display: inline-block;
  67. background: url("../assets/modal_header.svg") no-repeat center center;
  68. width: 9px;
  69. height: 14px;
  70. margin-right: 10px;
  71. }
  72. .el-dialog__headerbtn .el-dialog__close {
  73. color: #fff;
  74. }
  75. }
  76. .el-dialog__body {
  77. color: #fff;
  78. background-color: rgba(3, 18, 57, 0.78);
  79. }
  80. }
  81. </style>