Vue中el-dialog修改样式_el-dialog样式修改

弹窗打开关闭时关闭默认的过渡动画效果：（需要全局修改。在scoped中用：deep()改不动）

<style>
.dialog-fade-enter-active {
  animation: none !important;
}
.dialog-fade-leave-active {
  animation: none !important;
}
</style>

效果图： 

 使用：

<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>