多维表格
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.
 
 
 
 
 
 

124 lines
2.2 KiB

<script lang="ts" setup>
const props = withDefaults(
defineProps<{
visible: boolean
width?: string | number
size?: 'small' | 'medium' | 'large'
destroyOnClose?: boolean
maskClosable?: boolean
showSeparator?: boolean
wrapClassName?: string
}>(),
{
size: 'medium',
destroyOnClose: true,
maskClosable: true,
showSeparator: true,
wrapClassName: '',
},
)
const emits = defineEmits(['update:visible'])
const { width: propWidth, destroyOnClose, maskClosable, wrapClassName: _wrapClassName, showSeparator } = props
const { isMobileMode } = useGlobal()
const width = computed(() => {
if (isMobileMode.value) {
return '95vw'
}
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 (isMobileMode.value) {
return '95vh'
}
if (props.size === 'small') {
return 'auto'
}
if (props.size === 'medium') {
return '26.5'
}
if (props.size === 'large') {
return '80vh'
}
return 'auto'
})
const newWrapClassName = computed(() => {
let className = 'nc-modal-wrapper'
if (_wrapClassName) {
className += ` ${_wrapClassName}`
}
return className
})
const visible = useVModel(props, 'visible', emits)
const slots = useSlots()
</script>
<template>
<a-modal
v-model:visible="visible"
:class="{ active: visible }"
:width="width"
:centered="true"
:closable="false"
:wrap-class-name="newWrapClassName"
:footer="null"
:mask-closable="maskClosable"
:destroy-on-close="destroyOnClose"
@keydown.esc="visible = false"
>
<div
class="flex flex-col nc-modal p-6 h-full"
:style="{
maxHeight: height,
}"
>
<div
v-if="slots.header"
:class="{
'border-b-1 border-gray-200': showSeparator,
}"
class="flex pb-2 mb-2 text-lg font-medium"
>
<slot name="header" />
</div>
<slot />
</div>
</a-modal>
</template>
<style lang="scss">
.nc-modal-wrapper {
.ant-modal-content {
@apply !p-0;
}
}
</style>