vben
6 years ago
41 changed files with 1100 additions and 874 deletions
@ -1,246 +0,0 @@ |
|||
import './index.less'; |
|||
|
|||
import type { DrawerInstance, DrawerProps } from './types'; |
|||
import type { CSSProperties } from 'vue'; |
|||
|
|||
import { defineComponent, ref, computed, watchEffect, watch, unref, nextTick, toRaw } from 'vue'; |
|||
import { Drawer, Row, Col, Button } from 'ant-design-vue'; |
|||
|
|||
import { BasicTitle } from '/@/components/Basic'; |
|||
import { Loading } from '/@/components/Loading'; |
|||
import { LeftOutlined } from '@ant-design/icons-vue'; |
|||
|
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
|
|||
import { getSlot } from '/@/utils/helper/tsxHelper'; |
|||
import { isFunction, isNumber } from '/@/utils/is'; |
|||
import { deepMerge } from '/@/utils'; |
|||
import { tryTsxEmit } from '/@/utils/helper/vueHelper'; |
|||
|
|||
import { basicProps } from './props'; |
|||
|
|||
const prefixCls = 'basic-drawer'; |
|||
export default defineComponent({ |
|||
inheritAttrs: false, |
|||
props: basicProps, |
|||
emits: ['visible-change', 'ok', 'close', 'register'], |
|||
setup(props, { slots, emit, attrs }) { |
|||
const scrollRef = ref<ElRef>(null); |
|||
const visibleRef = ref(false); |
|||
const propsRef = ref<Partial<Nullable<DrawerProps>>>(null); |
|||
|
|||
const { t } = useI18n(); |
|||
|
|||
const getMergeProps = computed( |
|||
(): DrawerProps => { |
|||
return deepMerge(toRaw(props), unref(propsRef)); |
|||
} |
|||
); |
|||
|
|||
const getProps = computed( |
|||
(): DrawerProps => { |
|||
const opt = { |
|||
placement: 'right', |
|||
...attrs, |
|||
...unref(getMergeProps), |
|||
visible: unref(visibleRef), |
|||
}; |
|||
opt.title = undefined; |
|||
const { isDetail, width, wrapClassName, getContainer } = opt; |
|||
if (isDetail) { |
|||
if (!width) { |
|||
opt.width = '100%'; |
|||
} |
|||
const detailCls = `${prefixCls}__detail`; |
|||
|
|||
opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls; |
|||
|
|||
if (!getContainer) { |
|||
// TODO type error?
|
|||
opt.getContainer = '.layout-content' as any; |
|||
} |
|||
} |
|||
return opt as DrawerProps; |
|||
} |
|||
); |
|||
|
|||
const getBindValues = computed( |
|||
(): DrawerProps => { |
|||
return { |
|||
...attrs, |
|||
...unref(getProps), |
|||
}; |
|||
} |
|||
); |
|||
|
|||
// Custom implementation of the bottom button,
|
|||
const getFooterHeight = computed(() => { |
|||
const { footerHeight, showFooter } = unref(getProps); |
|||
|
|||
if (showFooter && footerHeight) { |
|||
return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`; |
|||
} |
|||
return `0px`; |
|||
}); |
|||
|
|||
const getScrollContentStyle = computed( |
|||
(): CSSProperties => { |
|||
const footerHeight = unref(getFooterHeight); |
|||
return { |
|||
position: 'relative', |
|||
height: `calc(100% - ${footerHeight})`, |
|||
overflow: 'auto', |
|||
padding: '16px', |
|||
paddingBottom: '30px', |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const getLoading = computed(() => { |
|||
return !!unref(getProps)?.loading; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
visibleRef.value = props.visible; |
|||
}); |
|||
|
|||
watch( |
|||
() => visibleRef.value, |
|||
(visible) => { |
|||
nextTick(() => { |
|||
emit('visible-change', visible); |
|||
}); |
|||
}, |
|||
{ |
|||
immediate: false, |
|||
} |
|||
); |
|||
|
|||
// Cancel event
|
|||
async function onClose(e: ChangeEvent) { |
|||
const { closeFunc } = unref(getProps); |
|||
emit('close', e); |
|||
if (closeFunc && isFunction(closeFunc)) { |
|||
const res = await closeFunc(); |
|||
visibleRef.value = !res; |
|||
return; |
|||
} |
|||
visibleRef.value = false; |
|||
} |
|||
|
|||
function setDrawerProps(props: Partial<DrawerProps>): void { |
|||
// Keep the last setDrawerProps
|
|||
propsRef.value = deepMerge(unref(propsRef) || {}, props); |
|||
|
|||
if (Reflect.has(props, 'visible')) { |
|||
visibleRef.value = !!props.visible; |
|||
} |
|||
} |
|||
|
|||
function renderFooter() { |
|||
if (slots?.footer) { |
|||
return getSlot(slots, 'footer'); |
|||
} |
|||
const { |
|||
showCancelBtn, |
|||
cancelButtonProps, |
|||
cancelText, |
|||
showOkBtn, |
|||
okType, |
|||
okText, |
|||
okButtonProps, |
|||
confirmLoading, |
|||
showFooter, |
|||
} = unref(getProps); |
|||
if (!showFooter) { |
|||
return null; |
|||
} |
|||
|
|||
return ( |
|||
<div class={`${prefixCls}__footer`}> |
|||
{getSlot(slots, 'insertFooter')} |
|||
{showCancelBtn && ( |
|||
<Button {...cancelButtonProps} onClick={onClose} class="mr-2"> |
|||
{() => cancelText} |
|||
</Button> |
|||
)} |
|||
{getSlot(slots, 'centerFooter')} |
|||
{showOkBtn && ( |
|||
<Button |
|||
type={okType} |
|||
onClick={() => { |
|||
emit('ok'); |
|||
}} |
|||
{...okButtonProps} |
|||
loading={confirmLoading} |
|||
> |
|||
{() => okText} |
|||
</Button> |
|||
)} |
|||
{getSlot(slots, 'appendFooter')} |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
function renderHeader() { |
|||
if (slots?.title) { |
|||
return getSlot(slots, 'title'); |
|||
} |
|||
const { title } = unref(getMergeProps); |
|||
|
|||
if (!props.isDetail) { |
|||
return <BasicTitle>{() => title || getSlot(slots, 'title')}</BasicTitle>; |
|||
} |
|||
return ( |
|||
<Row type="flex" align="middle" class={`${prefixCls}__detail-header`}> |
|||
{() => ( |
|||
<> |
|||
{props.showDetailBack && ( |
|||
<Button size="small" type="link" onClick={onClose}> |
|||
{() => <LeftOutlined />} |
|||
</Button> |
|||
)} |
|||
{title && ( |
|||
<Col style="flex:1" class={[`${prefixCls}__detail-title`, 'ellipsis', 'px-2']}> |
|||
{() => title} |
|||
</Col> |
|||
)} |
|||
{getSlot(slots, 'titleToolbar')} |
|||
</> |
|||
)} |
|||
</Row> |
|||
); |
|||
} |
|||
|
|||
const drawerInstance: DrawerInstance = { |
|||
setDrawerProps: setDrawerProps, |
|||
}; |
|||
|
|||
tryTsxEmit((instance) => { |
|||
emit('register', drawerInstance, instance.uid); |
|||
}); |
|||
|
|||
return () => { |
|||
return ( |
|||
<Drawer class={prefixCls} onClose={onClose} {...unref(getBindValues)}> |
|||
{{ |
|||
title: () => renderHeader(), |
|||
default: () => ( |
|||
<> |
|||
<div ref={scrollRef} style={unref(getScrollContentStyle)}> |
|||
<Loading |
|||
absolute |
|||
tip={t('component.drawer.loadingText')} |
|||
loading={unref(getLoading)} |
|||
/> |
|||
{getSlot(slots)} |
|||
</div> |
|||
{renderFooter()} |
|||
</> |
|||
), |
|||
}} |
|||
</Drawer> |
|||
); |
|||
}; |
|||
}, |
|||
}); |
|||
@ -0,0 +1,259 @@ |
|||
<template> |
|||
<Drawer :class="prefixCls" @close="onClose" v-bind="getBindValues"> |
|||
<template #title v-if="!$slots.title"> |
|||
<DrawerHeader |
|||
:title="getMergeProps.title" |
|||
:isDetail="isDetail" |
|||
:showDetailBack="showDetailBack" |
|||
@close="onClose" |
|||
> |
|||
<template #titleToolbar> |
|||
<slot name="titleToolbar" /> |
|||
</template> |
|||
</DrawerHeader> |
|||
</template> |
|||
|
|||
<ScrollContainer |
|||
:style="getScrollContentStyle" |
|||
v-loading="getLoading" |
|||
:loading-tip="loadingText || t('component.drawer.loadingText')" |
|||
> |
|||
<slot /> |
|||
</ScrollContainer> |
|||
<DrawerFooter v-bind="getProps" @close="onClose" @ok="handleOk" :height="getFooterHeight"> |
|||
<template #[item]="data" v-for="item in Object.keys($slots)"> |
|||
<slot :name="item" v-bind="data" /> |
|||
</template> |
|||
</DrawerFooter> |
|||
</Drawer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { DrawerInstance, DrawerProps } from './types'; |
|||
import type { CSSProperties } from 'vue'; |
|||
|
|||
import { |
|||
defineComponent, |
|||
ref, |
|||
computed, |
|||
watchEffect, |
|||
watch, |
|||
unref, |
|||
nextTick, |
|||
toRaw, |
|||
getCurrentInstance, |
|||
} from 'vue'; |
|||
import { Drawer } from 'ant-design-vue'; |
|||
|
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
|
|||
import { isFunction, isNumber } from '/@/utils/is'; |
|||
import { deepMerge } from '/@/utils'; |
|||
import DrawerFooter from './components/DrawerFooter.vue'; |
|||
import DrawerHeader from './components/DrawerHeader.vue'; |
|||
import { ScrollContainer } from '/@/components/Container'; |
|||
|
|||
import { basicProps } from './props'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { useAttrs } from '/@/hooks/core/useAttrs'; |
|||
|
|||
export default defineComponent({ |
|||
inheritAttrs: false, |
|||
components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader }, |
|||
props: basicProps, |
|||
emits: ['visible-change', 'ok', 'close', 'register'], |
|||
setup(props, { emit }) { |
|||
const visibleRef = ref(false); |
|||
const attrs = useAttrs(); |
|||
const propsRef = ref<Partial<Nullable<DrawerProps>>>(null); |
|||
|
|||
const { t } = useI18n(); |
|||
const { prefixVar, prefixCls } = useDesign('basic-drawer'); |
|||
|
|||
const drawerInstance: DrawerInstance = { |
|||
setDrawerProps: setDrawerProps, |
|||
emitVisible: undefined, |
|||
}; |
|||
|
|||
const instance = getCurrentInstance(); |
|||
|
|||
instance && emit('register', drawerInstance, instance.uid); |
|||
|
|||
const getMergeProps = computed( |
|||
(): DrawerProps => { |
|||
return deepMerge(toRaw(props), unref(propsRef)); |
|||
} |
|||
); |
|||
|
|||
const getProps = computed( |
|||
(): DrawerProps => { |
|||
const opt = { |
|||
placement: 'right', |
|||
...unref(attrs), |
|||
...unref(getMergeProps), |
|||
visible: unref(visibleRef), |
|||
}; |
|||
opt.title = undefined; |
|||
const { isDetail, width, wrapClassName, getContainer } = opt; |
|||
if (isDetail) { |
|||
if (!width) { |
|||
opt.width = '100%'; |
|||
} |
|||
const detailCls = `${prefixCls}__detail`; |
|||
opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls; |
|||
|
|||
if (!getContainer) { |
|||
// TODO type error? |
|||
opt.getContainer = `.${prefixVar}-layout-content` as any; |
|||
} |
|||
} |
|||
return opt as DrawerProps; |
|||
} |
|||
); |
|||
|
|||
const getBindValues = computed( |
|||
(): DrawerProps => { |
|||
return { |
|||
...attrs, |
|||
...unref(getProps), |
|||
}; |
|||
} |
|||
); |
|||
|
|||
// Custom implementation of the bottom button, |
|||
const getFooterHeight = computed(() => { |
|||
const { footerHeight, showFooter } = unref(getProps); |
|||
if (showFooter && footerHeight) { |
|||
return isNumber(footerHeight) |
|||
? `${footerHeight}px` |
|||
: `${footerHeight.replace('px', '')}px`; |
|||
} |
|||
return `0px`; |
|||
}); |
|||
|
|||
const getScrollContentStyle = computed( |
|||
(): CSSProperties => { |
|||
const footerHeight = unref(getFooterHeight); |
|||
return { |
|||
position: 'relative', |
|||
height: `calc(100% - ${footerHeight})`, |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const getLoading = computed(() => { |
|||
return !!unref(getProps)?.loading; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
visibleRef.value = props.visible; |
|||
}); |
|||
|
|||
watch( |
|||
() => visibleRef.value, |
|||
(visible) => { |
|||
nextTick(() => { |
|||
emit('visible-change', visible); |
|||
instance && drawerInstance.emitVisible?.(visible, instance.uid); |
|||
}); |
|||
} |
|||
); |
|||
|
|||
// Cancel event |
|||
async function onClose(e: Recordable) { |
|||
const { closeFunc } = unref(getProps); |
|||
emit('close', e); |
|||
if (closeFunc && isFunction(closeFunc)) { |
|||
const res = await closeFunc(); |
|||
visibleRef.value = !res; |
|||
return; |
|||
} |
|||
visibleRef.value = false; |
|||
} |
|||
|
|||
function setDrawerProps(props: Partial<DrawerProps>): void { |
|||
// Keep the last setDrawerProps |
|||
propsRef.value = deepMerge(unref(propsRef) || {}, props); |
|||
|
|||
if (Reflect.has(props, 'visible')) { |
|||
visibleRef.value = !!props.visible; |
|||
} |
|||
} |
|||
|
|||
function handleOk() { |
|||
emit('ok'); |
|||
} |
|||
|
|||
return { |
|||
onClose, |
|||
t, |
|||
prefixCls, |
|||
getMergeProps, |
|||
getScrollContentStyle, |
|||
getProps, |
|||
getLoading, |
|||
getBindValues, |
|||
getFooterHeight, |
|||
handleOk, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less"> |
|||
@import (reference) '../../../design/index.less'; |
|||
@header-height: 60px; |
|||
@detail-header-height: 40px; |
|||
@prefix-cls: ~'@{namespace}-basic-drawer'; |
|||
@prefix-cls-detail: ~'@{namespace}-basic-drawer__detail'; |
|||
|
|||
.@{prefix-cls} { |
|||
.ant-drawer-wrapper-body { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ant-drawer-close { |
|||
&:hover { |
|||
color: @error-color; |
|||
} |
|||
} |
|||
|
|||
.ant-drawer-body { |
|||
height: calc(100% - @header-height); |
|||
padding: 0; |
|||
background-color: @background-color-dark; |
|||
|
|||
.scrollbar__wrap { |
|||
padding: 16px !important; |
|||
margin-bottom: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.@{prefix-cls-detail} { |
|||
position: absolute; |
|||
|
|||
.ant-drawer-header { |
|||
width: 100%; |
|||
height: @detail-header-height; |
|||
padding: 0; |
|||
border-top: 1px solid @border-color-base; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ant-drawer-title { |
|||
height: 100%; |
|||
} |
|||
|
|||
.ant-drawer-close { |
|||
height: @detail-header-height; |
|||
line-height: @detail-header-height; |
|||
} |
|||
|
|||
.scrollbar__wrap { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.ant-drawer-body { |
|||
height: calc(100% - @detail-header-height); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<div :class="prefixCls" :style="getStyle" v-if="showFooter || $slots.footer"> |
|||
<template v-if="!$slots.footer"> |
|||
<slot name="insertFooter" /> |
|||
<a-button v-bind="cancelButtonProps" @click="handleClose" class="mr-2" v-if="showCancelBtn"> |
|||
{{ cancelText }} |
|||
</a-button> |
|||
<slot name="centerFooter" /> |
|||
<a-button |
|||
:type="okType" |
|||
@click="handleOk" |
|||
v-bind="okButtonProps" |
|||
class="mr-2" |
|||
:loading="confirmLoading" |
|||
v-if="showOkBtn" |
|||
> |
|||
{{ okText }} |
|||
</a-button> |
|||
<slot name="appendFooter" /> |
|||
</template> |
|||
|
|||
<template v-else> |
|||
<slot name="footer" /> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { CSSProperties } from 'vue'; |
|||
import { defineComponent, computed } from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
|
|||
import { footerProps } from '../props'; |
|||
export default defineComponent({ |
|||
name: 'BasicDrawerFooter', |
|||
props: { |
|||
...footerProps, |
|||
height: { |
|||
type: String, |
|||
default: '60px', |
|||
}, |
|||
}, |
|||
emits: ['ok', 'close'], |
|||
setup(props, { emit }) { |
|||
const { prefixCls } = useDesign('basic-drawer-footer'); |
|||
|
|||
const getStyle = computed( |
|||
(): CSSProperties => { |
|||
const heightStr = `${props.height}`; |
|||
return { |
|||
height: heightStr, |
|||
lineHeight: heightStr, |
|||
}; |
|||
} |
|||
); |
|||
|
|||
function handleOk() { |
|||
emit('ok'); |
|||
} |
|||
|
|||
function handleClose() { |
|||
emit('close'); |
|||
} |
|||
return { handleOk, prefixCls, handleClose, getStyle }; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import (reference) '../../../../design/index.less'; |
|||
@prefix-cls: ~'@{namespace}-basic-drawer-footer'; |
|||
@footer-height: 60px; |
|||
.@{prefix-cls} { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 0 12px 0 20px; |
|||
text-align: right; |
|||
background: #fff; |
|||
border-top: 1px solid @border-color-base; |
|||
|
|||
> * { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,73 @@ |
|||
<template> |
|||
<BasicTitle v-if="!isDetail" :class="prefixCls"> |
|||
<slot name="title" /> |
|||
{{ !$slots.title ? title : '' }} |
|||
</BasicTitle> |
|||
|
|||
<div :class="[prefixCls, `${prefixCls}--detail`]" v-else> |
|||
<span :class="`${prefixCls}__twrap`"> |
|||
<span @click="handleClose" v-if="showDetailBack"> |
|||
<ArrowLeftOutlined :class="`${prefixCls}__back`" /> |
|||
</span> |
|||
<span v-if="title">{{ title }}</span> |
|||
</span> |
|||
|
|||
<span :class="`${prefixCls}__toolbar`"> |
|||
<slot name="titleToolbar" /> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicTitle } from '/@/components/Basic'; |
|||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'; |
|||
|
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
|
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
export default defineComponent({ |
|||
name: 'BasicDrawerHeader', |
|||
components: { BasicTitle, ArrowLeftOutlined }, |
|||
props: { |
|||
isDetail: propTypes.bool, |
|||
showDetailBack: propTypes.bool, |
|||
title: propTypes.string, |
|||
}, |
|||
setup(_, { emit }) { |
|||
const { prefixCls } = useDesign('basic-drawer-header'); |
|||
|
|||
function handleClose() { |
|||
emit('close'); |
|||
} |
|||
return { prefixCls, handleClose }; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import (reference) '../../../../design/index.less'; |
|||
@prefix-cls: ~'@{namespace}-basic-drawer-header'; |
|||
@footer-height: 60px; |
|||
.@{prefix-cls} { |
|||
display: flex; |
|||
height: 100%; |
|||
align-items: center; |
|||
|
|||
&__back { |
|||
padding: 0 12px; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: @primary-color; |
|||
} |
|||
} |
|||
|
|||
&__twrap { |
|||
flex: 1; |
|||
} |
|||
|
|||
&__toolbar { |
|||
padding-right: 50px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,66 +0,0 @@ |
|||
@import (reference) '../../../design/index.less'; |
|||
@header-height: 40px; |
|||
@footer-height: 60px; |
|||
|
|||
.basic-drawer { |
|||
.ant-drawer-wrapper-body { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ant-drawer-close { |
|||
&:hover { |
|||
color: @error-color; |
|||
} |
|||
} |
|||
|
|||
.ant-drawer-body { |
|||
height: calc(100% - @header-height); |
|||
padding: 0; |
|||
background-color: @background-color-dark; |
|||
|
|||
.scrollbar__wrap { |
|||
padding: 16px; |
|||
} |
|||
} |
|||
|
|||
&__detail { |
|||
position: absolute; |
|||
|
|||
&-header { |
|||
height: 100%; |
|||
} |
|||
|
|||
.ant-drawer-header { |
|||
width: 100%; |
|||
height: @header-height; |
|||
padding: 0; |
|||
border-top: 1px solid @border-color-base; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ant-drawer-title { |
|||
height: 100%; |
|||
} |
|||
|
|||
.ant-drawer-close { |
|||
height: @header-height; |
|||
line-height: @header-height; |
|||
} |
|||
|
|||
.scrollbar__wrap { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
&__footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: @footer-height; |
|||
padding: 0 26px; |
|||
line-height: @footer-height; |
|||
text-align: right; |
|||
background: #fff; |
|||
border-top: 1px solid @border-color-base; |
|||
} |
|||
} |
|||
@ -1,10 +1,10 @@ |
|||
import './src/index.less'; |
|||
import { withInstall } from '../util'; |
|||
import BasicModal from './src/BasicModal'; |
|||
import BasicModal from './src/BasicModal.vue'; |
|||
|
|||
withInstall(BasicModal); |
|||
|
|||
export { BasicModal }; |
|||
export { useModalContext } from './src/useModalContext'; |
|||
export { useModal, useModalInner } from './src/useModal'; |
|||
export { useModalContext } from './src/hooks/useModalContext'; |
|||
export { useModal, useModalInner } from './src/hooks/useModal'; |
|||
export * from './src/types'; |
|||
|
|||
@ -1,232 +0,0 @@ |
|||
import type { ModalProps, ModalMethods } from './types'; |
|||
|
|||
import { defineComponent, computed, ref, watch, unref, watchEffect, toRef } from 'vue'; |
|||
|
|||
import Modal from './Modal'; |
|||
import { Button } from '/@/components/Button'; |
|||
import ModalWrapper from './ModalWrapper'; |
|||
import { BasicTitle } from '/@/components/Basic'; |
|||
import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'; |
|||
|
|||
import { getSlot, extendSlots } from '/@/utils/helper/tsxHelper'; |
|||
import { isFunction } from '/@/utils/is'; |
|||
import { deepMerge } from '/@/utils'; |
|||
import { tryTsxEmit } from '/@/utils/helper/vueHelper'; |
|||
|
|||
import { basicProps } from './props'; |
|||
import { useFullScreen } from './useFullScreen'; |
|||
export default defineComponent({ |
|||
name: 'BasicModal', |
|||
props: basicProps, |
|||
emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'], |
|||
setup(props, { slots, emit, attrs }) { |
|||
const visibleRef = ref(false); |
|||
const propsRef = ref<Partial<ModalProps> | null>(null); |
|||
const modalWrapperRef = ref<ComponentRef>(null); |
|||
// modal Bottom and top height
|
|||
const extHeightRef = ref(0); |
|||
// Unexpanded height of the popup
|
|||
|
|||
// Custom title component: get title
|
|||
const getMergeProps = computed( |
|||
(): ModalProps => { |
|||
return { |
|||
...props, |
|||
...(unref(propsRef) as any), |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({ |
|||
modalWrapperRef, |
|||
extHeightRef, |
|||
wrapClassName: toRef(getMergeProps.value, 'wrapClassName'), |
|||
}); |
|||
|
|||
// modal component does not need title
|
|||
const getProps = computed( |
|||
(): ModalProps => { |
|||
const opt = { |
|||
...unref(getMergeProps), |
|||
visible: unref(visibleRef), |
|||
title: undefined, |
|||
}; |
|||
|
|||
return { |
|||
...opt, |
|||
wrapClassName: unref(getWrapClassName), |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const getModalBindValue = computed((): any => { |
|||
return { ...attrs, ...unref(getProps) }; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
visibleRef.value = !!props.visible; |
|||
}); |
|||
|
|||
watch( |
|||
() => unref(visibleRef), |
|||
(v) => { |
|||
emit('visible-change', v); |
|||
}, |
|||
{ |
|||
immediate: false, |
|||
} |
|||
); |
|||
|
|||
/** |
|||
* @description: 渲染标题 |
|||
*/ |
|||
function renderTitle() { |
|||
const { helpMessage } = unref(getProps); |
|||
const { title } = unref(getMergeProps); |
|||
return ( |
|||
<BasicTitle helpMessage={helpMessage}> |
|||
{() => (slots.title ? getSlot(slots, 'title') : title)} |
|||
</BasicTitle> |
|||
); |
|||
} |
|||
|
|||
// 取消事件
|
|||
async function handleCancel(e: Event) { |
|||
e?.stopPropagation(); |
|||
|
|||
if (props.closeFunc && isFunction(props.closeFunc)) { |
|||
const isClose: boolean = await props.closeFunc(); |
|||
visibleRef.value = !isClose; |
|||
return; |
|||
} |
|||
|
|||
visibleRef.value = false; |
|||
emit('cancel'); |
|||
} |
|||
|
|||
/** |
|||
* @description: 设置modal参数 |
|||
*/ |
|||
function setModalProps(props: Partial<ModalProps>): void { |
|||
// Keep the last setModalProps
|
|||
propsRef.value = deepMerge(unref(propsRef) || {}, props); |
|||
if (!Reflect.has(props, 'visible')) return; |
|||
visibleRef.value = !!props.visible; |
|||
} |
|||
|
|||
function renderContent() { |
|||
type OmitWrapperType = Omit< |
|||
ModalProps, |
|||
'fullScreen' | 'modalFooterHeight' | 'visible' | 'loading' |
|||
>; |
|||
const { useWrapper, loading, wrapperProps } = unref(getProps); |
|||
if (!useWrapper) return getSlot(slots); |
|||
|
|||
const showFooter = props.footer !== undefined && !props.footer ? 0 : undefined; |
|||
return ( |
|||
<ModalWrapper |
|||
footerOffset={props.wrapperFooterOffset} |
|||
fullScreen={unref(fullScreenRef)} |
|||
ref={modalWrapperRef} |
|||
loading={loading} |
|||
visible={unref(visibleRef)} |
|||
modalFooterHeight={showFooter} |
|||
{...((wrapperProps as unknown) as OmitWrapperType)} |
|||
onGetExtHeight={(height: number) => { |
|||
extHeightRef.value = height; |
|||
}} |
|||
onHeightChange={(height: string) => { |
|||
emit('height-change', height); |
|||
}} |
|||
> |
|||
{() => getSlot(slots)} |
|||
</ModalWrapper> |
|||
); |
|||
} |
|||
|
|||
// 底部按钮自定义实现,
|
|||
function renderFooter() { |
|||
const { |
|||
showCancelBtn, |
|||
cancelButtonProps, |
|||
cancelText, |
|||
showOkBtn, |
|||
okType, |
|||
okText, |
|||
okButtonProps, |
|||
confirmLoading, |
|||
} = unref(getProps); |
|||
|
|||
return ( |
|||
<> |
|||
{getSlot(slots, 'insertFooter')} |
|||
{showCancelBtn && ( |
|||
<Button {...cancelButtonProps} onClick={handleCancel}> |
|||
{() => cancelText} |
|||
</Button> |
|||
)} |
|||
{getSlot(slots, 'centerdFooter')} |
|||
{showOkBtn && ( |
|||
<Button |
|||
type={okType as any} |
|||
loading={confirmLoading} |
|||
onClick={() => { |
|||
emit('ok'); |
|||
}} |
|||
{...okButtonProps} |
|||
> |
|||
{() => okText} |
|||
</Button> |
|||
)} |
|||
{getSlot(slots, 'appendFooter')} |
|||
</> |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description: 关闭按钮 |
|||
*/ |
|||
function renderClose() { |
|||
const { canFullscreen } = unref(getProps); |
|||
|
|||
const fullScreen = unref(fullScreenRef) ? ( |
|||
<FullscreenExitOutlined role="full" onClick={handleFullScreen} /> |
|||
) : ( |
|||
<FullscreenOutlined role="close" onClick={handleFullScreen} /> |
|||
); |
|||
|
|||
const cls = [ |
|||
'custom-close-icon', |
|||
{ |
|||
'can-full': canFullscreen, |
|||
}, |
|||
]; |
|||
|
|||
return ( |
|||
<div class={cls}> |
|||
{canFullscreen && fullScreen} |
|||
<CloseOutlined onClick={handleCancel} /> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
const modalMethods: ModalMethods = { |
|||
setModalProps, |
|||
}; |
|||
|
|||
tryTsxEmit((instance) => { |
|||
emit('register', modalMethods, instance.uid); |
|||
}); |
|||
return () => ( |
|||
<Modal onCancel={handleCancel} {...unref(getModalBindValue)}> |
|||
{{ |
|||
footer: () => renderFooter(), |
|||
closeIcon: () => renderClose(), |
|||
title: () => renderTitle(), |
|||
...extendSlots(slots, ['default']), |
|||
default: () => renderContent(), |
|||
}} |
|||
</Modal> |
|||
); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<Modal @cancel="handleCancel" v-bind="getBindValue"> |
|||
<template #closeIcon v-if="!$slots.closeIcon"> |
|||
<ModalClose |
|||
:canFullscreen="getProps.canFullscreen" |
|||
:fullScreen="fullScreenRef" |
|||
@cancel="handleCancel" |
|||
@fullscreen="handleFullScreen" |
|||
/> |
|||
</template> |
|||
|
|||
<template #title v-if="!$slots.title"> |
|||
<ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" /> |
|||
</template> |
|||
|
|||
<template #footer v-if="!$slots.footer"> |
|||
<ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel" /> |
|||
</template> |
|||
<ModalWrapper |
|||
:useWrapper="getProps.useWrapper" |
|||
:footerOffset="wrapperFooterOffset" |
|||
:fullScreen="fullScreenRef" |
|||
ref="modalWrapperRef" |
|||
:loading="getProps.loading" |
|||
:visible="visibleRef" |
|||
:modalFooterHeight="footer !== undefined && !footer ? 0 : undefined" |
|||
v-bind="omit(getProps.wrapperProps, 'visible')" |
|||
@ext-height="handleExtHeight" |
|||
@height-change="handleHeightChange" |
|||
> |
|||
<slot /> |
|||
</ModalWrapper> |
|||
</Modal> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { ModalProps, ModalMethods } from './types'; |
|||
|
|||
import { |
|||
defineComponent, |
|||
computed, |
|||
ref, |
|||
watch, |
|||
unref, |
|||
watchEffect, |
|||
toRef, |
|||
getCurrentInstance, |
|||
} from 'vue'; |
|||
|
|||
import Modal from './components/Modal'; |
|||
import ModalWrapper from './components/ModalWrapper.vue'; |
|||
import ModalClose from './components/ModalClose.vue'; |
|||
import ModalFooter from './components/ModalFooter.vue'; |
|||
import ModalHeader from './components/ModalHeader.vue'; |
|||
|
|||
import { isFunction } from '/@/utils/is'; |
|||
import { deepMerge } from '/@/utils'; |
|||
|
|||
import { basicProps } from './props'; |
|||
import { useFullScreen } from './hooks/useModalFullScreen'; |
|||
import { omit } from 'lodash-es'; |
|||
export default defineComponent({ |
|||
name: 'BasicModal', |
|||
components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader }, |
|||
props: basicProps, |
|||
emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'], |
|||
setup(props, { emit, attrs }) { |
|||
const visibleRef = ref(false); |
|||
const propsRef = ref<Partial<ModalProps> | null>(null); |
|||
const modalWrapperRef = ref<ComponentRef>(null); |
|||
// modal Bottom and top height |
|||
const extHeightRef = ref(0); |
|||
const modalMethods: ModalMethods = { |
|||
setModalProps, |
|||
emitVisible: undefined, |
|||
}; |
|||
const instance = getCurrentInstance(); |
|||
if (instance) { |
|||
emit('register', modalMethods, instance.uid); |
|||
} |
|||
|
|||
// Custom title component: get title |
|||
const getMergeProps = computed( |
|||
(): ModalProps => { |
|||
return { |
|||
...props, |
|||
...(unref(propsRef) as any), |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({ |
|||
modalWrapperRef, |
|||
extHeightRef, |
|||
wrapClassName: toRef(getMergeProps.value, 'wrapClassName'), |
|||
}); |
|||
|
|||
// modal component does not need title |
|||
const getProps = computed( |
|||
(): ModalProps => { |
|||
const opt = { |
|||
...unref(getMergeProps), |
|||
visible: unref(visibleRef), |
|||
title: undefined, |
|||
}; |
|||
|
|||
return { |
|||
...opt, |
|||
wrapClassName: unref(getWrapClassName), |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const getBindValue = computed((): any => { |
|||
return { ...attrs, ...unref(getProps) }; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
visibleRef.value = !!props.visible; |
|||
}); |
|||
|
|||
watch( |
|||
() => unref(visibleRef), |
|||
(v) => { |
|||
emit('visible-change', v); |
|||
instance && modalMethods.emitVisible?.(v, instance.uid); |
|||
}, |
|||
{ |
|||
immediate: false, |
|||
} |
|||
); |
|||
|
|||
// 取消事件 |
|||
async function handleCancel(e: Event) { |
|||
e?.stopPropagation(); |
|||
|
|||
if (props.closeFunc && isFunction(props.closeFunc)) { |
|||
const isClose: boolean = await props.closeFunc(); |
|||
visibleRef.value = !isClose; |
|||
return; |
|||
} |
|||
|
|||
visibleRef.value = false; |
|||
emit('cancel'); |
|||
} |
|||
|
|||
/** |
|||
* @description: 设置modal参数 |
|||
*/ |
|||
function setModalProps(props: Partial<ModalProps>): void { |
|||
// Keep the last setModalProps |
|||
propsRef.value = deepMerge(unref(propsRef) || {}, props); |
|||
if (!Reflect.has(props, 'visible')) return; |
|||
visibleRef.value = !!props.visible; |
|||
} |
|||
|
|||
function handleOk() { |
|||
emit('ok'); |
|||
} |
|||
|
|||
function handleHeightChange(height: string) { |
|||
emit('height-change', height); |
|||
} |
|||
|
|||
function handleExtHeight(height: number) { |
|||
extHeightRef.value = height; |
|||
} |
|||
|
|||
return { |
|||
handleCancel, |
|||
getBindValue, |
|||
getProps, |
|||
handleFullScreen, |
|||
fullScreenRef, |
|||
getMergeProps, |
|||
handleOk, |
|||
visibleRef, |
|||
omit, |
|||
modalWrapperRef, |
|||
handleExtHeight, |
|||
handleHeightChange, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,161 +0,0 @@ |
|||
import type { ModalWrapperProps } from './types'; |
|||
import type { CSSProperties } from 'vue'; |
|||
|
|||
import { |
|||
defineComponent, |
|||
computed, |
|||
ref, |
|||
watchEffect, |
|||
unref, |
|||
watch, |
|||
onMounted, |
|||
nextTick, |
|||
onUnmounted, |
|||
} from 'vue'; |
|||
import { Spin } from 'ant-design-vue'; |
|||
|
|||
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; |
|||
|
|||
import { getSlot } from '/@/utils/helper/tsxHelper'; |
|||
import { useElResize } from '/@/hooks/event/useElResize'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { createModalContext } from './useModalContext'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'ModalWrapper', |
|||
props: { |
|||
loading: propTypes.bool, |
|||
modalHeaderHeight: propTypes.number.def(50), |
|||
modalFooterHeight: propTypes.number.def(54), |
|||
minHeight: propTypes.number.def(200), |
|||
footerOffset: propTypes.number.def(0), |
|||
visible: propTypes.bool, |
|||
fullScreen: propTypes.bool, |
|||
}, |
|||
emits: ['heightChange', 'getExtHeight'], |
|||
setup(props: ModalWrapperProps, { slots, emit }) { |
|||
const wrapperRef = ref<ElRef>(null); |
|||
const spinRef = ref<ComponentRef>(null); |
|||
const realHeightRef = ref(0); |
|||
|
|||
let stopElResizeFn: Fn = () => {}; |
|||
|
|||
useWindowSizeFn(setModalHeight); |
|||
|
|||
createModalContext({ |
|||
redoModalHeight: setModalHeight, |
|||
}); |
|||
|
|||
const wrapStyle = computed( |
|||
(): CSSProperties => { |
|||
return { |
|||
minHeight: `${props.minHeight}px`, |
|||
height: `${unref(realHeightRef)}px`, |
|||
overflow: 'auto', |
|||
}; |
|||
} |
|||
); |
|||
|
|||
watchEffect(() => { |
|||
setModalHeight(); |
|||
}); |
|||
|
|||
watch( |
|||
() => props.fullScreen, |
|||
(v) => { |
|||
!v && setModalHeight(); |
|||
} |
|||
); |
|||
|
|||
onMounted(() => { |
|||
const { modalHeaderHeight, modalFooterHeight } = props; |
|||
emit('getExtHeight', modalHeaderHeight + modalFooterHeight); |
|||
listenElResize(); |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
stopElResizeFn && stopElResizeFn(); |
|||
}); |
|||
|
|||
async function setModalHeight() { |
|||
// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
|
|||
// 加上这个,就必须在使用的时候传递父级的visible
|
|||
if (!props.visible) return; |
|||
const wrapperRefDom = unref(wrapperRef); |
|||
if (!wrapperRefDom) return; |
|||
const bodyDom = wrapperRefDom.parentElement; |
|||
if (!bodyDom) return; |
|||
bodyDom.style.padding = '0'; |
|||
await nextTick(); |
|||
|
|||
try { |
|||
const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement; |
|||
if (!modalDom) return; |
|||
|
|||
const modalRect = getComputedStyle(modalDom).top; |
|||
const modalTop = Number.parseInt(modalRect); |
|||
let maxHeight = |
|||
window.innerHeight - |
|||
modalTop * 2 + |
|||
(props.footerOffset! || 0) - |
|||
props.modalFooterHeight - |
|||
props.modalHeaderHeight; |
|||
|
|||
// 距离顶部过进会出现滚动条
|
|||
if (modalTop < 40) { |
|||
maxHeight -= 26; |
|||
} |
|||
await nextTick(); |
|||
const spinEl = unref(spinRef); |
|||
|
|||
if (!spinEl) return; |
|||
|
|||
const spinContainerEl = spinEl.$el.querySelector('.ant-spin-container') as HTMLElement; |
|||
if (!spinContainerEl) return; |
|||
|
|||
const realHeight = spinContainerEl.scrollHeight; |
|||
|
|||
if (props.fullScreen) { |
|||
realHeightRef.value = |
|||
window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight; |
|||
} else { |
|||
realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30; |
|||
} |
|||
emit('heightChange', unref(realHeightRef)); |
|||
|
|||
nextTick(() => { |
|||
const el = spinEl.$el; |
|||
if (el) { |
|||
el.style.height = `${unref(realHeightRef)}px`; |
|||
} |
|||
}); |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
} |
|||
|
|||
function listenElResize() { |
|||
const wrapper = unref(wrapperRef); |
|||
if (!wrapper) return; |
|||
|
|||
const container = wrapper.querySelector('.ant-spin-container'); |
|||
if (!container) return; |
|||
|
|||
const [start, stop] = useElResize(container, () => { |
|||
setModalHeight(); |
|||
}); |
|||
stopElResizeFn = stop; |
|||
start(); |
|||
} |
|||
|
|||
return () => { |
|||
return ( |
|||
<div ref={wrapperRef} style={unref(wrapStyle)}> |
|||
<Spin ref={spinRef} spinning={props.loading}> |
|||
{() => getSlot(slots)} |
|||
</Spin> |
|||
</div> |
|||
); |
|||
}; |
|||
}, |
|||
}); |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<div :class="getClass"> |
|||
<template v-if="canFullscreen"> |
|||
<FullscreenExitOutlined role="full" @click="handleFullScreen" v-if="fullScreen" /> |
|||
|
|||
<FullscreenOutlined role="close" @click="handleFullScreen" v-else /> |
|||
</template> |
|||
<CloseOutlined @click="handleCancel" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, computed } from 'vue'; |
|||
import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'ModalClose', |
|||
components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined }, |
|||
props: { |
|||
canFullscreen: propTypes.bool.def(true), |
|||
fullScreen: propTypes.bool, |
|||
}, |
|||
emits: ['cancel', 'fullscreen'], |
|||
setup(props, { emit }) { |
|||
const { prefixCls } = useDesign('basic-modal-close'); |
|||
|
|||
const getClass = computed(() => { |
|||
return [ |
|||
prefixCls, |
|||
`${prefixCls}--custom`, |
|||
{ |
|||
[`${prefixCls}--can-full`]: props.canFullscreen, |
|||
}, |
|||
]; |
|||
}); |
|||
|
|||
function handleCancel() { |
|||
emit('cancel'); |
|||
} |
|||
function handleFullScreen(e: Event) { |
|||
e?.stopPropagation(); |
|||
e?.preventDefault(); |
|||
emit('fullscreen'); |
|||
} |
|||
|
|||
return { |
|||
getClass, |
|||
prefixCls, |
|||
handleCancel, |
|||
handleFullScreen, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less"> |
|||
@import (reference) '../../../../design/index.less'; |
|||
@prefix-cls: ~'@{namespace}-basic-modal-close'; |
|||
.@{prefix-cls} { |
|||
display: flex; |
|||
height: 95%; |
|||
align-items: center; |
|||
|
|||
> span { |
|||
margin-left: 48px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
&--can-full { |
|||
> span { |
|||
margin-left: 12px; |
|||
} |
|||
} |
|||
|
|||
&:not(&--can-full) { |
|||
> span:nth-child(1) { |
|||
&:hover { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
|
|||
& span:nth-child(1) { |
|||
display: inline-block; |
|||
padding: 10px; |
|||
|
|||
&:hover { |
|||
color: @primary-color; |
|||
} |
|||
} |
|||
|
|||
& span:nth-child(2) { |
|||
&:hover { |
|||
color: @error-color; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,39 @@ |
|||
<template> |
|||
<div> |
|||
<slot name="insertFooter" /> |
|||
<a-button v-bind="cancelButtonProps" @click="handleCancel" v-if="showCancelBtn"> |
|||
{{ cancelText }} |
|||
</a-button> |
|||
<slot name="centerFooter" /> |
|||
<a-button |
|||
:type="okType" |
|||
@click="handleOk" |
|||
:loading="confirmLoading" |
|||
v-bind="okButtonProps" |
|||
v-if="showOkBtn" |
|||
> |
|||
{{ okText }} |
|||
</a-button> |
|||
<slot name="appendFooter" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import { basicProps } from '../props'; |
|||
export default defineComponent({ |
|||
name: 'BasicModalFooter', |
|||
props: basicProps, |
|||
emits: ['ok', 'cancel'], |
|||
setup(_, { emit }) { |
|||
function handleOk() { |
|||
emit('ok'); |
|||
} |
|||
|
|||
function handleCancel() { |
|||
emit('cancel'); |
|||
} |
|||
return { handleOk, handleCancel }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<BasicTitle :helpMessage="helpMessage"> |
|||
{{ title }} |
|||
</BasicTitle> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { PropType } from 'vue'; |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicTitle } from '/@/components/Basic'; |
|||
|
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
export default defineComponent({ |
|||
name: 'BasicModalHeader', |
|||
components: { BasicTitle }, |
|||
props: { |
|||
helpMessage: { |
|||
type: [String, Array] as PropType<string | string[]>, |
|||
}, |
|||
title: propTypes.string, |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,152 @@ |
|||
<template> |
|||
<ScrollContainer ref="wrapperRef" :style="wrapStyle"> |
|||
<div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip"> |
|||
<slot /> |
|||
</div> |
|||
</ScrollContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { ModalWrapperProps } from '../types'; |
|||
import type { CSSProperties } from 'vue'; |
|||
|
|||
import { |
|||
defineComponent, |
|||
computed, |
|||
ref, |
|||
watchEffect, |
|||
unref, |
|||
watch, |
|||
onMounted, |
|||
nextTick, |
|||
onUnmounted, |
|||
} from 'vue'; |
|||
import { Spin } from 'ant-design-vue'; |
|||
|
|||
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; |
|||
import { ScrollContainer } from '/@/components/Container'; |
|||
|
|||
// import { useElResize } from '/@/hooks/event/useElResize'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { createModalContext } from '../hooks/useModalContext'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'ModalWrapper', |
|||
components: { Spin, ScrollContainer }, |
|||
props: { |
|||
loading: propTypes.bool, |
|||
useWrapper: propTypes.bool.def(true), |
|||
modalHeaderHeight: propTypes.number.def(50), |
|||
modalFooterHeight: propTypes.number.def(54), |
|||
minHeight: propTypes.number.def(200), |
|||
footerOffset: propTypes.number.def(0), |
|||
visible: propTypes.bool, |
|||
fullScreen: propTypes.bool, |
|||
loadingTip: propTypes.string, |
|||
}, |
|||
emits: ['height-change', 'ext-height'], |
|||
setup(props: ModalWrapperProps, { emit }) { |
|||
const wrapperRef = ref<ComponentRef>(null); |
|||
const spinRef = ref<ElRef>(null); |
|||
const realHeightRef = ref(0); |
|||
|
|||
let stopElResizeFn: Fn = () => {}; |
|||
|
|||
useWindowSizeFn(setModalHeight); |
|||
|
|||
createModalContext({ |
|||
redoModalHeight: setModalHeight, |
|||
}); |
|||
|
|||
const wrapStyle = computed( |
|||
(): CSSProperties => { |
|||
return { |
|||
minHeight: `${props.minHeight}px`, |
|||
height: `${unref(realHeightRef)}px`, |
|||
// overflow: 'auto', |
|||
}; |
|||
} |
|||
); |
|||
|
|||
const spinStyle = computed( |
|||
(): CSSProperties => { |
|||
return { |
|||
// padding 28 |
|||
height: `${unref(realHeightRef) - 28}px`, |
|||
}; |
|||
} |
|||
); |
|||
|
|||
watchEffect(() => { |
|||
props.useWrapper && setModalHeight(); |
|||
}); |
|||
|
|||
watch( |
|||
() => props.fullScreen, |
|||
() => { |
|||
setTimeout(() => { |
|||
setModalHeight(); |
|||
}, 0); |
|||
} |
|||
); |
|||
|
|||
onMounted(() => { |
|||
const { modalHeaderHeight, modalFooterHeight } = props; |
|||
emit('ext-height', modalHeaderHeight + modalFooterHeight); |
|||
// listenElResize(); |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
stopElResizeFn && stopElResizeFn(); |
|||
}); |
|||
|
|||
async function setModalHeight() { |
|||
// 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度 |
|||
// 加上这个,就必须在使用的时候传递父级的visible |
|||
if (!props.visible) return; |
|||
const wrapperRefDom = unref(wrapperRef); |
|||
if (!wrapperRefDom) return; |
|||
const bodyDom = wrapperRefDom.$el.parentElement; |
|||
if (!bodyDom) return; |
|||
bodyDom.style.padding = '0'; |
|||
await nextTick(); |
|||
|
|||
try { |
|||
const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement; |
|||
if (!modalDom) return; |
|||
|
|||
const modalRect = getComputedStyle(modalDom).top; |
|||
const modalTop = Number.parseInt(modalRect); |
|||
let maxHeight = |
|||
window.innerHeight - |
|||
modalTop * 2 + |
|||
(props.footerOffset! || 0) - |
|||
props.modalFooterHeight - |
|||
props.modalHeaderHeight; |
|||
|
|||
// 距离顶部过进会出现滚动条 |
|||
if (modalTop < 40) { |
|||
maxHeight -= 26; |
|||
} |
|||
await nextTick(); |
|||
const spinEl = unref(spinRef); |
|||
|
|||
if (!spinEl) return; |
|||
|
|||
const realHeight = spinEl.scrollHeight; |
|||
|
|||
if (props.fullScreen) { |
|||
realHeightRef.value = |
|||
window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight; |
|||
} else { |
|||
realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30; |
|||
} |
|||
emit('height-change', unref(realHeightRef)); |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
} |
|||
|
|||
return { wrapStyle, wrapperRef, spinRef, spinStyle }; |
|||
}, |
|||
}); |
|||
</script> |
|||
Loading…
Reference in new issue