Browse Source

fix: use rootClassName

main
xingyu 2 years ago
parent
commit
3e9b724ea5
  1. 12
      src/components/Drawer/src/BasicDrawer.vue
  2. 1
      src/components/Drawer/src/typing.ts

12
src/components/Drawer/src/BasicDrawer.vue

@ -52,7 +52,7 @@ const getProps = computed((): DrawerProps => {
opt.width = '100%' opt.width = '100%'
const detailCls = `${prefixCls}__detail` const detailCls = `${prefixCls}__detail`
opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls opt.rootClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls
if (!getContainer) if (!getContainer)
opt.getContainer = `.${prefixVar}-layout-content` as any opt.getContainer = `.${prefixVar}-layout-content` as any
@ -133,9 +133,10 @@ function handleOk() {
</script> </script>
<template> <template>
<Drawer :class="prefixCls" v-bind="getBindValues" @close="onClose"> <Drawer :root-class-name="prefixCls" v-bind="getBindValues" @close="onClose">
<template v-if="!$slots.title" #title> <template v-if="!$slots.title" #title>
<DrawerHeader :title="getMergeProps.title as any" :is-detail="isDetail" :show-detail-back="showDetailBack" @close="onClose"> <DrawerHeader :title="getMergeProps.title as any" :is-detail="isDetail" :show-detail-back="showDetailBack"
@close="onClose">
<template #titleToolbar> <template #titleToolbar>
<slot name="titleToolbar" /> <slot name="titleToolbar" />
</template> </template>
@ -145,7 +146,8 @@ function handleOk() {
<slot name="title" /> <slot name="title" />
</template> </template>
<ScrollContainer v-loading="getLoading" :style="getScrollContentStyle" :loading-tip="loadingText || t('common.loadingText')"> <ScrollContainer v-loading="getLoading" :style="getScrollContentStyle"
:loading-tip="loadingText || t('common.loadingText')">
<slot /> <slot />
</ScrollContainer> </ScrollContainer>
<DrawerFooter v-bind="getProps" :height="getFooterHeight" @close="onClose" @ok="handleOk"> <DrawerFooter v-bind="getProps" :height="getFooterHeight" @close="onClose" @ok="handleOk">
@ -177,7 +179,7 @@ function handleOk() {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
> .scrollbar > .scrollbar__bar.is-horizontal { >.scrollbar>.scrollbar__bar.is-horizontal {
display: none; display: none;
} }
} }

1
src/components/Drawer/src/typing.ts

@ -134,6 +134,7 @@ export interface DrawerProps extends DrawerFooterProps {
*/ */
wrapClassName?: string wrapClassName?: string
class?: string class?: string
rootClassName?: string
/** /**
* Style of wrapper element which **contains mask** compare to `drawerStyle` * Style of wrapper element which **contains mask** compare to `drawerStyle`
* @type object * @type object