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

<template>
  <el-dialog
    :title="title"
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :custom-class="myclass ? 'custom-my-class' : ''"
    @close="resetCancel"
    :width="width"
    append-to-body
  >
    <slot></slot>
    <div v-if="footer" slot="footer" class="dialog-footer">
      <el-form size="small">
        <el-form-item class="dialog-from-item">
          <el-button size="mini" @click="resetCancel">{{ closeText }}</el-button>
          <el-button type="primary" size="mini" @click="resetConfirm">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

// Props
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  myclass: {
    type: Boolean,
    default: false
  },
  closeText: {
    type: String,
    default: '取消'
  },
  width: {
    type: String,
    default: '50%'
  },
  footer: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['close', 'confirm'])

// Dialog visible state (双向绑定)
const dialogFormVisible = ref(false)

// Methods
const open = () => {
  dialogFormVisible.value = true
}

const close = () => {
  dialogFormVisible.value = false
}

// 取消按钮
const resetCancel = () => {
  emit('close')
}

// 确定按钮
const resetConfirm = () => {
  emit('confirm')
}

// 暴露方法给父组件使用（可选）
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 10px;

  .el-dialog__header {
    border-bottom: 1px solid #DDDDDD;
    padding: 10px 20px;
    background: #F2F4F6;
    border-top-left-radius: 10px;  /* 上左角圆角 */
    border-top-right-radius: 10px; /* 上右角圆角 */


    span {
      // font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 16px;
      color: #000000;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: -20px;
        width: 5px;
        border-radius: 5px;
        height: 100%;
        background-color: #1485EF;
      }
    }
  }

  .el-dialog__headerbtn {
    top: 15px;
  }

  .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;
}
::v-deep .el-dialog__body{
  padding-top: 10px !important;
}
</style>