# Modal 弹层框

---

Modal 组件，可以自定义设置覆层颜色，根据自己喜好自定以传入覆层中间的组件展示。

## 使用指南

在 Taro 文件中引入组件

:::demo

```js
import { TctModal } from "taro-tools-ui";
```

:::

**组件依赖的样式文件（仅按需引用时需要）**

:::demo

```scss
@import "~taro-tools-ui/dist/components/modal.scss";
```

:::

## 一般用法

说明：

- 该组件为受控组件，组件的开关状态由 isOpened 来控制，开发者需要通过 onClose 事件来更新 isOpened 值变化。

:::demo

```js
import Taro, { Component, Config } from "@tarojs/taro";
import { View, Button } from "@tarojs/components";
import TctModal from "taro-tools-ui";
import "./index.scss";

class Modal extends Component<ModalProps, ModalState> {
  config: Config = {
    navigationBarTitleText: "modal"
  };

  state = {
    isOpened: false
  };

  onOpen = () => {
    this.setState({ isOpened: true });
  };

  onClose = () => {
    this.setState({ isOpened: false });
  };

  onClickBtn = e => {
    e.stopPropagation();
  };

  render() {
    const { isOpened } = this.state;

    const content = (
      <View className="modal-content">
        <View>Title Modal</View>
        <Button onClick={this.onClickBtn}>这里可以自定义传入组件哦</Button>
      </View>
    );

    const style = "background-color: rgba(0, 244, 125, 0.5);";

    return (
      <View>
        <TctModal
          customStyle={style}
          isOpened={isOpened}
          touchClose={true}
          onClose={this.onClose}
        >
          {content}
        </TctModal>
        <View onClick={this.onOpen}>点我打开弹窗</View>
      </View>
    );
  }
}

export default Modal;
```

:::

## 参数

| 参数        | 说明                       | 类型    | 可选值 | 默认值 |
| ----------- | -------------------------- | ------- | ------ | ------ |
| customStyle | 自定以背景色样式           | String  | -      | -      |
| isOpened    | 是否开启                   | Boolean | -      | false  |
| touchClose  | 是否可以控制点击弹层就关闭 | Boolean | -      | false  |

## 事件

| 事件名称 | 说明                 | 返回参数 |
| -------- | -------------------- | -------- |
| onClose  | 点击关闭按钮触发事件 | event    |