|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<Drawer v-bind="getBindValues" :class="prefixCls" @close="onClose"> |
|
|
|
<template #title v-if="!$slots.title"> |
|
|
|
<DrawerHeader |
|
|
|
:title="mergeProps.title" |
|
|
|
:title="getMergeProps.title" |
|
|
|
:isDetail="isDetail" |
|
|
|
:showDetailBack="showDetailBack" |
|
|
|
@close="onClose" |
|
|
|
@ -32,8 +32,8 @@ |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import type { DrawerInstance, DrawerProps } from './typing'; |
|
|
|
import type { CSSProperties } from 'vue'; |
|
|
|
import { ref, computed, watch, unref, nextTick, toRaw, getCurrentInstance } from 'vue'; |
|
|
|
import { ref, computed, watch, unref, nextTick, getCurrentInstance } from 'vue'; |
|
|
|
import type { CSSProperties, Ref } from 'vue'; |
|
|
|
import { Drawer } from 'ant-design-vue'; |
|
|
|
import { useI18n } from '@/hooks/web/useI18n'; |
|
|
|
import { isFunction, isNumber } from '@/utils/is'; |
|
|
|
@ -53,13 +53,13 @@ |
|
|
|
|
|
|
|
const openRef = ref(false); |
|
|
|
const attrs = useAttrs(); |
|
|
|
const propsRef = ref<Partial<DrawerProps | null>>(null); |
|
|
|
const propsRef = ref({}) as Ref<Partial<DrawerProps>>; |
|
|
|
|
|
|
|
const { t } = useI18n(); |
|
|
|
const { prefixVar, prefixCls } = useDesign('basic-drawer'); |
|
|
|
|
|
|
|
const drawerInstance: DrawerInstance = { |
|
|
|
setDrawerProps: setDrawerProps as any, |
|
|
|
setDrawerProps, |
|
|
|
emitOpen: undefined, |
|
|
|
}; |
|
|
|
|
|
|
|
@ -67,12 +67,12 @@ |
|
|
|
|
|
|
|
instance && emit('register', drawerInstance, instance.uid); |
|
|
|
|
|
|
|
const getMergeProps = computed((): DrawerProps => { |
|
|
|
return deepMerge(toRaw(props), unref(propsRef)) as any; |
|
|
|
const getMergeProps = computed(() => { |
|
|
|
return deepMerge(props, unref(propsRef)); |
|
|
|
}); |
|
|
|
|
|
|
|
const getProps = computed((): DrawerProps => { |
|
|
|
const opt = { |
|
|
|
const getProps = computed(() => { |
|
|
|
const opt: Partial<DrawerProps> = { |
|
|
|
placement: 'right', |
|
|
|
...unref(attrs), |
|
|
|
...unref(getMergeProps), |
|
|
|
@ -91,10 +91,10 @@ |
|
|
|
opt.getContainer = `.${prefixVar}-layout-content`; |
|
|
|
} |
|
|
|
} |
|
|
|
return opt as DrawerProps; |
|
|
|
return opt; |
|
|
|
}); |
|
|
|
|
|
|
|
const getBindValues = computed((): DrawerProps => { |
|
|
|
const getBindValues = computed(() => { |
|
|
|
return { |
|
|
|
...attrs, |
|
|
|
...unref(getProps), |
|
|
|
@ -152,9 +152,9 @@ |
|
|
|
openRef.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
function setDrawerProps(props: Partial<DrawerProps>): void { |
|
|
|
function setDrawerProps(props: Partial<DrawerProps>) { |
|
|
|
// Keep the last setDrawerProps |
|
|
|
propsRef.value = deepMerge(unref(propsRef) || ({} as any), props); |
|
|
|
propsRef.value = deepMerge(unref(propsRef), props); |
|
|
|
|
|
|
|
if (Reflect.has(props, 'open')) { |
|
|
|
openRef.value = !!props.open; |
|
|
|
@ -164,8 +164,6 @@ |
|
|
|
function handleOk() { |
|
|
|
emit('ok'); |
|
|
|
} |
|
|
|
|
|
|
|
const mergeProps = getMergeProps as any; |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
@header-height: 60px; |
|
|
|
|