menduner/src/components/CtDialog/index.vue

<template>
  <!-- 对话框共用组件 -->
  <v-dialog
    style="z-index: var(--zIndex-dialog)"
    v-model="show"
    persistent
    v-bind="$attrs"
    :fullscreen="props.showDrawer"
    :max-width="dialogWidth"
    :width="dialogWidth"
  >
    <v-card max-height="90vh" class="d-flex flex-column">
      <v-card-title :class="{'drawer': props.showDrawer}">
        <!-- text-h6  h5 -->
        <span class="d-flex align-center justify-space-between" :class="[props.titleClass]">
          {{ props.title }}
          <v-btn
            v-if="props.closeable"
            icon
            elevation="0"
            @click="handleClose"
          >
            <v-icon :color="props.showDrawer ? '#fff' : '#000'">
              mdi-close
            </v-icon>
          </v-btn>
        </span>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="flex-grow-1 overflow-y-auto" :class="{ 'd-flex': props.flexBox }" :style="props.bodyStyle">
        <slot></slot>
      </v-card-text>
      <template v-if="props.footer">
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            v-if="props.closeable"
            color="primary"
            text
            @click="handleClose"
          >
            {{ closeText }}
          </v-btn>
          <v-btn
            color="primary"
            text
            @click="handleSave"
          >
            {{ props.submitText }}
          </v-btn>
        </v-card-actions>
      </template>
      <template v-else>
        <slot name="footer"></slot>
      </template>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref, computed, watch  } from 'vue'
defineOptions({ name: 'components-ct-dialog' })
const emits = defineEmits(['update:visible', 'close', 'submit'])

const props = defineProps({
  titleClass: {
    type: String,
    default: 'text-h5'
  },
  bodyStyle: {
    type: String,
    default: ''
  },
  widthType: {
    type: [Number, String],
    default: 0
  },
  title: {
    type: String,
    default: '提示'
  },
  submitText: {
    type: String,
    default: '提交'
  },
  visible: {
    type: Boolean,
    default: false
  },
  footer: {
    type: Boolean,
    default: true
  },
  showDrawer: {
    type: Boolean,
    default: false
  },
  flexBox: {
    type: Boolean,
    default: false
  },
  closeable: {
    type: Boolean,
    default: true
  },
  closeText: {
    type: String,
    default: '取消'
  }
})

const show = ref(false)
watch(() => props.visible, (newVal) => {
  show.value = newVal
})

const dialogWidth = computed(() => {
  const arr = ['900px', '1200px', '400px', '600px', '500px', '96%']
  return arr[+props.widthType]
})
const handleClose = () => {
  // emits('update:visible', false)
  emits('close', false)
}
const handleSave = () => {
  emits('submit', false)
}
</script>

<style lang="scss" scoped>
.drawer{
  color: #fff;
  background-color: #1976d2;
}
// ::v-deep .v-dialog:not(.v-dialog--fullscreen) {
//   overflow: visible !important;
// }
</style>