多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

81 lines
1.3 KiB

<script lang="ts" setup>
const props = withDefaults(
defineProps<{
visible: boolean
width?: string | number
size?: 'small' | 'medium' | 'large'
destroyOnClose?: boolean
}>(),
{
size: 'medium',
destroyOnClose: true,
},
)
const emits = defineEmits(['update:visible'])
const { width: propWidth, destroyOnClose } = props
const width = computed(() => {
if (propWidth) {
return propWidth
}
if (props.size === 'small') {
return '28rem'
}
if (props.size === 'medium') {
return '40rem'
}
if (props.size === 'large') {
return '80rem'
}
return 'max(30vw, 600px)'
})
const height = computed(() => {
if (props.size === 'small') {
return 'auto'
}
if (props.size === 'medium') {
return '26.5'
}
if (props.size === 'large') {
return '80vh'
}
return 'auto'
})
const visible = useVModel(props, 'visible', emits)
</script>
<template>
<a-modal
v-model:visible="visible"
:class="{ active: visible }"
:width="width"
:closable="false"
wrap-class-name="nc-modal-wrapper"
:footer="null"
:destroy-on-close="destroyOnClose"
@keydown.esc="visible = false"
>
<div class="nc-modal max-h-[{{ height }}]">
<slot />
</div>
</a-modal>
</template>
<style lang="scss">
.nc-modal-wrapper {
.ant-modal-content {
@apply !p-0;
}
}
</style>