Skip to content

Commit

Permalink
feat(Modal & Drawer): modal, drawer 组件新增 wrapperClass 配置 (#731)
Browse files Browse the repository at this point in the history 
* feat: modal,drawer组件新增wrapperClass配置

* feat: pr问题修改

---------

Co-authored-by: blankzhang <blankzhang@blankzhangdeMac-mini.local>
  • Loading branch information
@zym19960704
zym19960704 and blankzhang committed Apr 11, 2024
1 parent c50a1e9 commit 8cae208
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 12 deletions.
18 changes: 14 additions & 4 deletions components/drawer/drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,12 +162,24 @@ const Drawer = defineComponent({
props.displayDirective === 'show',
);

const wrapperClass = computed(() => {
return [`${prefixCls}-wrapper`, props.contentClass].filter(Boolean);
});

const rootClass = computed(() => {
return [
prefixCls,
`${prefixCls}-${props.placement}`,
props.wrapperClass,
].filter(Boolean);
});

return () => (
<Teleport
disabled={!getContainer.value?.()}
to={getContainer.value?.()}
>
<div class={`${prefixCls} ${prefixCls}-${props.placement}`}>
<div class={rootClass.value}>
<Transition name={`${prefixCls}-mask-fade`}>
{props.mask && showDom.value && (
<div
Expand Down Expand Up @@ -204,9 +216,7 @@ const Drawer = defineComponent({
}
>
<div
class={`${prefixCls}-wrapper ${
props.contentClass || ''
}`}
class={wrapperClass.value}
ref={drawerRef}
style={styles.value}
onClick={(event) => event.stopPropagation()}
Expand Down
3 changes: 3 additions & 0 deletions components/drawer/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ export const drawerProps = {
type: String as PropType<DrawerPlacement>,
default: 'right' satisfies DrawerPlacement,
},
// 内容外层类名
contentClass: String,
// 根类名
wrapperClass: String,
resizable: {
type: Boolean,
default: false,
Expand Down
15 changes: 11 additions & 4 deletions components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,12 +210,21 @@ const Modal = defineComponent({
mouseDownInsideChild.value = false;
};

// 最外层类名
const rootClass = computed(() => {
return [prefixCls, props.wrapperClass].filter(Boolean);
});

const wrapperClass = computed(() => {
return [`${prefixCls}-wrapper`, props.contentClass].filter(Boolean);
});

return () => (
<Teleport
disabled={!getContainer.value?.()}
to={getContainer.value?.()}
>
<div class={`${prefixCls}`}>
<div class={rootClass.value}>
<Transition name={`${prefixCls}-mask-fade`}>
{props.mask && showDom.value && (
<div
Expand Down Expand Up @@ -249,9 +258,7 @@ const Modal = defineComponent({
onClick={(event) => handleClickMask(event)}
>
<div
class={`${prefixCls}-wrapper ${
props.contentClass || ''
}`}
class={wrapperClass.value}
style={styles.value}
onClick={(event) => event.stopPropagation()}
onMousedown={() => {
Expand Down
3 changes: 3 additions & 0 deletions components/modal/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,10 @@ export const modalProps = {
type: Boolean,
default: false,
},
// 内容外层类名
contentClass: String,
// 根类名
wrapperClass: String,
} as const satisfies ComponentObjectPropsOptions;

export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
Expand Down
9 changes: 5 additions & 4 deletions docs/.vitepress/components/drawer/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ closable.vue
| maskClosable | 点击蒙层是否允许关闭 | boolean | `true` |
| escClosable | 按下 ESC 是否允许关闭 | boolean | `true` |
| operable | 仅 mask 为 false 时生效，不显示蒙层时，页面是否可交互 | boolean | `false` |
| title | 标题 | string | - |
| title | 标题 | string | `-` |
| footer | 是否显示底部内容 | boolean | `false` |
| footerBorder | 是否显示底部分割线 | boolean | `false` |
| okText | 确认按钮文字 | string | 确定 |
Expand All @@ -96,11 +96,12 @@ closable.vue
| width | 宽度<br/>（即将废弃，推荐使用 dimension） | string/number | 520 |
| hight | 高度，在 placement 为 top 或 bottom 时使用<br/>（即将废弃，推荐使用 dimension） | string/number | 520 |
| placement | 抽屉方向 | `'right'` `'bottom'` `'left'` `'right'` | `'right'` |
| contentClass | 可用于设置内容的类名 | string | - |
| contentClass | 可用于设置内容的类名 | string | `-` |
| wrapperClass | 可用于设置组件根类名 | string | `-` |
| getContainer | 指定 `Drawer` 挂载的 HTML 节点 | () => HTMLElement | `() => document.body` |
| resizable | 是否支持宽度/高度可拖拽 | boolean | `false` |
| resizeMax | 可拖拽的最大尺寸（如：`100`、`'200px'`、`'30%'`） | number/string | - |
| resizeMin | 可拖拽的最小尺寸（同上） | number/string | - |
| resizeMax | 可拖拽的最大尺寸（如：`100`、`'200px'`、`'30%'`） | number/string | `-` |
| resizeMin | 可拖拽的最小尺寸（同上） | number/string | `-` |

## Drawer Event

Expand Down
1 change: 1 addition & 0 deletions docs/.vitepress/components/modal/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ closable.vue
| center | 标题、内容、按钮居中 | Boolean | `false` |
| fullScreen | 全屏显示 | Boolean | `false` |
| contentClass | 可用于设置内容的类名 | String | `-` |
| wrapperClass | 可用于设置组件根类名 | String | `-` |
| getContainer | 指定 `Modal` 挂载的 HTML 节点 | () => HTMLElement | `() => document.body` |

## Modal Event
Expand Down

0 comments on commit 8cae208

Please sign in to comment.