---
title: WKPopup 弹出层
group:
  title: 基础组件
  path: /base/
---

## 何时使用

弹出框，可自定义内容。

## 基本使用

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

export default () => {
  const [d1, setD1] = useState(false);
  const [d2, setD2] = useState(false);
  const [d3, setD3] = useState(false);
  const [options1, setOptions1] = useState({});
  const [options2, setOptions2] = useState({});
  const [options3, setOptions3] = useState({});

  const handleClick1 =
    (o = {}) =>
    () => {
      setD1(true);
      setOptions1(o);
    };
  const handleClick2 =
    (o = {}) =>
    () => {
      setD2(true);
      setOptions2(o);
    };
  const handleClick3 =
    (o = {}) =>
    () => {
      setD3(true);
      setOptions3(o);
    };
  return (
    <PageWrapper title="基本使用">
      <View className="modal">
        <View style={{ margin: '20px' }}>普通popup</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick1({ destroyOnClose: false })}
            text="打开popup"
          />
        </View>
        <View style={{ margin: '20px' }}>关闭销毁</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick1({ destroyOnClose: true })}
            text="打开popup"
          />
        </View>
        <View style={{ margin: '20px' }}>不同位置的抽屉弹窗</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick1({ position: 'top', destroyOnClose: false })}
            text="打开上方抽屉"
          />
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick1({ position: 'bottom', destroyOnClose: false })}
            text="打开下方抽屉"
          />
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick2({ position: 'left' })}
            text="打开左侧抽屉"
          />
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick2({ position: 'right' })}
            text="打开右侧侧抽屉"
          />
          <WKButton
            className="btn"
            type="info"
            plain
            onClick={handleClick3({ position: 'center' })}
            text="打开中间抽屉"
          />
        </View>
        <View style={{ margin: '20px' }}>带圆角抽屉</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKButton className="btn" type="info" plain onClick={handleClick1({ round: true })} text="打开popup" />
        </View>
      </View>

      <WKPopup visible={d1} {...options1} onClose={() => setD1(false)}>
        <View style={{ height: '200px' }}>这是抽屉内容弹窗</View>
      </WKPopup>
      <WKPopup visible={d2} position="left" {...options2} onClose={() => setD2(false)}>
        这是抽屉内容弹窗
      </WKPopup>
      <WKPopup visible={d3} position="center" {...options3} onClose={() => setD3(false)}>
        这是抽屉内容弹窗
      </WKPopup>
    </PageWrapper>
  );
};
```

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