Vue中配置el-dialog样式

Love The Way You Lie 2022-09-04 10:58 483阅读 0赞

## 效果图： ##

![20210813103241325.png][]

##  使用： ##

<template>
      <div>
          <LjButton @click="dialogVisible = true">打开弹出框</LjButton>
          <div class="LjDialog">
            <el-dialog
              title=""
              :visible.sync="dialogVisible"
              :modal-append-to-body="false"
              :close-on-click-modal="false"
              :modal="false"
              width="55%"
              :show-close="true"
            >
              hello 大家好
              <div class="LjDialog-footer">
                <slot name="footer">
                  <LjButton
                    style="margin: 0 10px"
                    type="danger"
                    @click="dialogVisible = false"
                    >取 消</LjButton
                  >
                  <LjButton type="primary" @click="dialogVisible = false"
                    >确 定</LjButton
                  >
                </slot>
              </div>
            </el-dialog>
      </div>
    </template>
    
    <script>
    import LjButton from "@/components/LjButton/index.vue";
    
    export default {
      name: "",
      components: {
        LjButton
      },
      props: {},
      data() {
        return {
          dialogVisible: false
        };
      },
      computed: {},
      created() {},
      mounted() {},
      filters: {},
      methods: {},
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
      .LjDialog {
        ::v-deep .el-dialog {
          background-color: #091f2cee;
          border: 1px solid rgb(13, 210, 236);
    
          .el-dialog__title {
            color: white;
            caret-color: transparent;
          }
          .el-icon-close {
            color: white;
            &:hover {
              color: rgb(9, 205, 219);
            }
          }
          .el-dialog__body {
            color: white;
            font-size: 18px;
          }
          .LjDialog-footer {
            text-align: right;
            margin: 30px 0 0 0;
          }
        }
      }
    </style>

[20210813103241325.png]: /images/20220829/528e92f8c88f4cb7aed5c99d5d7d19cd.png