jin_ji_hu/src/views/components/myDialog/index.vue

<template>
  <el-dialog
   :title="title" 
   :visible.sync="dialogFormVisible"
   :close-on-click-modal="false"
   :close-on-press-escape="false"
   :custom-class="myclass ? 'custom-my-class':''"
   @close="resetCancel"
   append-to-body
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-form size="small">
        <el-form-item class="dialog-from-item">
          <el-button size="mini" @click="resetCancel">取消</el-button>
          <el-button type="primary" size="mini" @click="resetConfirm">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
    }
  },
  props:{
    title:{
      type:String,
      default:''
    },
    myclass:{
      type:Boolean,
      default:false,
    }
  },
  methods:{
    open(){
      this.dialogFormVisible = true
    },
    close(){
      this.dialogFormVisible = false;
    },
    // 取消按钮
    resetCancel(){
      this.$emit('close')
    },
    // 确定按钮
    resetConfirm(){
      this.$emit('confirm')
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 25vh !important;
  border-radius: 5px;
  .el-dialog__header {
    border-bottom: 1px solid #DDDDDD;
    span {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 16px;
      color: #000000;
    }
  }
  .el-dialog__footer {
    border-top: 1px solid #DDDDDD;
    .dialog-footer {
      .el-form {
        .dialog-from-item {
          margin-bottom: 0;
          .el-form-item__content {
            .el-button {
              padding: 10px 17px;
            }
          }
        }
      }
    }
  }
}
::v-deep .custom-my-class {
  margin-top: 15vh !important;
}
</style>