---
title: WKDialog 弹出框
group:
  title: 反馈组件
  path: /feedback/
---

## 何时使用

在保留当前页面状态的情况下，告知用户并承载相关操作。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKCheckTag, WKButton, WKModal, DialogAction, WKDialog, View } from '@wakeapp/components';
export default () => {
  const [d1, setD1] = useState(false);

  return (
    <PageWrapper title="基本使用">
      <View className="dialog">
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton type="info" plain onClick={() => setD1(true)} text="打开dialog" />
        </View>
      </View>
      <WKDialog visible={d1} title="标题" onConfirm={() => setD1(false)}>
        普通dialog
      </WKDialog>
    </PageWrapper>
  );
};
```

## 图标关闭

```tsx
/**
 * title: 图标关闭
 * desc: 支持右上角图标关闭形式
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKCheckTag, WKButton, WKModal, DialogAction, WKDialog, View } from '@wakeapp/components';
export default () => {
  const [d1, setD1] = useState(false);

  return (
    <PageWrapper title="图标关闭">
      <View className="dialog">
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton type="info" plain onClick={() => setD1(true)} text="打开dialog" />
        </View>
      </View>
      <WKDialog
        visible={d1}
        theme="round-button"
        title="标题"
        showCloseIcon
        showCancelButton={false}
        showConfirmButton={false}
        onClose={() => setD1(false)}
      >
        图标关闭
      </WKDialog>
    </PageWrapper>
  );
};
```

## 圆角&异步关闭

```tsx
/**
 * title: 圆角&异步关闭
 * desc: 支持按钮为圆角主题，自定义延时关闭
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKCheckTag, WKButton, WKModal, DialogAction, WKDialog, View } from '@wakeapp/components';
export default () => {
  const [d2, setD2] = useState(false);

  const handleConfirm = async (action: DialogAction, done: Function) => {
    if (action === DialogAction.confirm) {
      setTimeout(done, 1000);
    } else {
      done();
    }
  };

  return (
    <PageWrapper title="圆角&异步关闭">
      <View className="dialog">
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton type="info" plain onClick={() => setD2(true)} text="打开dialog" />
        </View>
      </View>
      <WKDialog
        visible={d2}
        theme="round-button"
        title="标题"
        onBeforeClose={handleConfirm}
        onClose={() => setD2(false)}
      >
        圆角&异步关闭
      </WKDialog>
    </PageWrapper>
  );
};
```

## API 形式

```tsx
/**
 * title: WKDialog API 调用
 */
import React, { useState } from 'react';
import api from '@wakeapp/api';
import PageWrapper from '../PageWrapper';
import { WKButton, WKDialog } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="WKDialog API 调用">
      <WKButton
        type="info"
        plain
        onClick={() => {
          WKDialog.alert({
            title: '标题',
            message: '提示内容',
            onConfirm: () => {
              api.showToast({ title: '点击确认' });
            },
            onCancel: () => {
              api.showToast({ title: '点击取消' });
            },
          });
        }}
        text="WKDialog.alert"
      />
      <WKButton
        type="info"
        plain
        onClick={() => {
          WKDialog.confirm({
            title: '标题',
            message: '提示内容',
            onConfirm: () => {
              api.showToast({ title: '点击确认' });
            },
            onCancel: () => {
              api.showToast({ title: '点击取消' });
            },
          });
        }}
        text="WKDialog.confirm"
      />
    </PageWrapper>
  );
};
```

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