Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal confirm closable 属性开放配置 #95

Merged
merged 2 commits into from
Apr 2, 2022
Merged

Modal confirm closable 属性开放配置 #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c04bcd
feat: modal confirm 开放 closable
winixt Apr 1, 2022
6435e42
docs: 修改 modal 文档
winixt Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions components/modal/modalApi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ interface ModalConfig {
type VNodeProperty = 'title' | 'content' | 'footer';

const forceProps = {
closable: false,
maskClosable: false,
forGlobal: true,
displayDirective: 'if',
Expand All @@ -43,6 +42,7 @@ function create(type: ModalType, config: ModalConfig) {
} = {
width: 400,
show: true,
closable: false,
};
let cbFuncEnd = false;

Expand All @@ -60,22 +60,27 @@ function create(type: ModalType, config: ModalConfig) {
render(<Modal {...props} v-slots={slots} />, div);
}

async function handleCallBack(event: MouseEvent, cbFunc?: (event: MouseEvent) => void | Promise<any>) {
async function handleCallBack(
event: MouseEvent,
cbFunc?: (event: MouseEvent) => void | Promise<any>,
) {
if (cbFuncEnd) return;
cbFuncEnd = true;
try {
if (isFunction(cbFunc)) await cbFunc(event);
mergeProps.show = false;
renderModal();
} catch (error) { }
} catch (error) {}
cbFuncEnd = false;
}

function updateProps(options: ModalConfig) {
// 更新 props
Object.assign(mergeProps, options || {});
mergeProps.onOk = (event: MouseEvent) => handleCallBack(event, options.onOk);
mergeProps.onCancel = (event: MouseEvent) => handleCallBack(event, options.onCancel);
mergeProps.onOk = (event: MouseEvent) =>
handleCallBack(event, options.onOk);
mergeProps.onCancel = (event: MouseEvent) =>
handleCallBack(event, options.onCancel);

// 更新 slots
['title', 'content', 'footer'].forEach((key) => {
Expand Down
10 changes: 3 additions & 7 deletions docs/.vitepress/components/modal/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,24 @@ app.use(FModal);

### 基础用法


--COMMON

### 确认对话框

使用 `confirm()` 可以快捷地弹出确认框。


--CONFIRM

### 信息反馈

各种类型的信息提示，只提供一个按钮用于关闭。

各种类型的信息提示

--FEEDBACK

### 自定义页脚

通过 slot `footer`可以自定义页脚内容


--FOOTER

--CODE
Expand All @@ -55,7 +51,7 @@ app.use(FModal);
| cancelText | 取消按钮文字 | String | 取消 |
| width | 宽度 | String/Number | 520 |
| top | 距离顶部 | String/Number | 50 |
| verticalCenter | 垂直居中 | Boolean | false |
| verticalCenter | 垂直居中 | Boolean | false |
| center | 标题、内容、按钮居中 | Boolean | `false` |
| fullScreen | 全屏显示 | Boolean | `false` |
| contentClass | 可用于设置内容的类名 | String | - |
Expand Down Expand Up @@ -118,7 +114,7 @@ const modal = Modal.info();

modal.update({
title: '修改的标题',
content: '修改的内容'
content: '修改的内容',
});

modal.destroy();
Expand Down