airoptweb/src/components/cloudChart/dialog/SubDialog.vue

<template>
  <el-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    align-center
    :modal="false"
    :close-on-click-modal="false"
    :append-to-body="true"
    draggable
    :fullscreen="false"
    :modal-append-to-body="false"
    :modal-class="modalClass"
    :width="width"
    :class="dialogClass"
    :style="{ height: height }"
    :before-close="handleBeforeClose"
  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
      </div>
    </template>
    
    <!-- 内容插槽 -->
    <div class="dialog-content" :style="{ height: contentHeight }">
      <slot></slot>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '弹窗标题'
  },
  width: {
    type: String,
    default: '450'
  },
  height: {
    type: String,
    default: 'auto'
  },
  contentHeight: {
    type: String,
    default: 'calc(100% - 110px)'
  },
  modalClass: {
    type: String,
    default: 'summary-dlg'
  },
  dialogClass: {
    type: String,
    default: 'dialog_class bgcolor tianjia'
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const handleBeforeClose = (done) => {
  emit('cancel')
  done()
}

const handleCancel = () => {
  emit('update:modelValue', false)
  emit('cancel')
}

const handleConfirm = () => {
  emit('confirm')
  emit('update:modelValue', false)
}
</script>

<style scoped>
.dialog-content {
  overflow-y: auto;  /* 只允许垂直滚动 */
  overflow-x: hidden; /* 禁止水平滚动 */
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box; /* 确保padding不增加总宽度 */
}
</style>