---
title: WKModal 对话框
group:
  title: 反馈组件
  path: /feedback/
---

## 何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState, useMemo } from 'react';
import { delay } from '@wakeapp/utils';
import { WKButton, WKModal, View } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import { styled } from '@wakeapp/components/utils';

const Title = styled(
  {
    paddingTop: '26px',
    fontWeight: 500,
    lineHeight: '24px',
    textAlign: 'center',
  },
  { className: 'title' }
);

const Content = styled({
  flex: 1,
  maxHeight: '60vh',
  padding: '26px 24px',
  overflowY: 'auto',
  fontSize: '14px',
  lineHeight: '22px',
  whiteSpace: 'pre-wrap',
  textAlign: 'center',
  wordWrap: 'break-word',
  paddingTop: '8px',
  color: 'rgba(0, 0, 0, 0.9)',
  textAlign: 'center',
});

export default () => {
  const [d1, setD1] = useState(false);

  const _contentStyle = useMemo(() => ({ width: '640rpx', borderRadius: '32rpx' }), []);

  return (
    <PageWrapper title="基本使用">
      <View className="modal">
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton type="info" plain onClick={() => setD1(true)} text="打开modal" />
        </View>
      </View>
      <WKModal visible={d1} onClose={() => setD1(false)} contentStyle={_contentStyle}>
        <Title>普通modal</Title>
        <Content>
          <WKButton type="primary" text="我知道了" block />
        </Content>
      </WKModal>
    </PageWrapper>
  );
};
```

## 延时关闭

```tsx
/**
 * title: 延时关闭
 * desc: 延时关闭
 */
import React, { useState, useMemo } from 'react';
import { delay } from '@wakeapp/utils';
import { WKButton, WKModal, View } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import { styled } from '@wakeapp/components/utils';

const Title = styled(
  {
    paddingTop: '26px',
    fontWeight: 500,
    lineHeight: '24px',
    textAlign: 'center',
  },
  { className: 'title' }
);

const Content = styled({
  flex: 1,
  maxHeight: '60vh',
  padding: '26px 24px',
  overflowY: 'auto',
  fontSize: '14px',
  lineHeight: '22px',
  whiteSpace: 'pre-wrap',
  textAlign: 'center',
  wordWrap: 'break-word',
  paddingTop: '8px',
  color: 'rgba(0, 0, 0, 0.9)',
  textAlign: 'center',
});

export default () => {
  const [d2, setD2] = useState(false);

  const handleBeforClose = async (done: Function) => {
    await delay(1000);
    done();
  };

  const _contentStyle = useMemo(() => ({ width: '640rpx', borderRadius: '32rpx' }), []);

  return (
    <PageWrapper title="延迟关闭">
      <View className="modal">
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton type="info" plain onClick={() => setD2(true)} text="打开modal" />
        </View>
      </View>
      <WKModal visible={d2} onBeforeClose={handleBeforClose} contentStyle={_contentStyle} onClose={() => setD2(false)}>
        <Title>延迟关闭</Title>
        <Content>
          <WKButton type="primary" text="我知道了" block />
        </Content>
      </WKModal>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKModal/index.d.ts'></API>
