# Trigger Trigger

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/trigger/freepass)
- 平台：移动端
- 维护者：蒋贝贝
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Trigger]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import { Trigger, Input, Button, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-trigger`;
interface TriggerDemoProps{
  popupVisible?: boolean;
  popupPlacement?: string
  forceRender?: boolean;
}
interface TriggerDemoState {
  popupVisible?: boolean;
  count?: number;
}

class TriggerDemo extends Component<TriggerDemoProps, TriggerDemoState> {
  getChildRef = (el: HTMLDivElement) => this.childRef = el;
  childRef?: HTMLDivElement;
  constructor(props: TriggerDemoProps) {
    super(props);
    this.state = {
      popupVisible: false,
      count: 0,
    }
  }
  onBtnClick = () => this.setState({ count: (this.state.count || 0) + 1 })
  onPopupVisibleChange = (visible?: boolean) => this.setState({ popupVisible: visible })
  render() {
    const { count = 0, popupVisible } = this.state;
    return (
      <div className={prefixCls}>
        <div style={{ width: 200 }}>
          <Trigger
            action={['click']}
            popup={(
              <div style={{ background: '#66B6F3', color: '#fff', padding: '10px 20px' }}>
                {count} - 

                <Button onClick={this.onBtnClick}>
                  Add
                </Button>
              </div>
            )}
            popupPlacement="bottomLeft"
            popupClassName="popupClassName"
            popupVisible={popupVisible}
            onPopupVisibleChange={this.onPopupVisibleChange}
          >
            <div ref={this.getChildRef}>
              <Input />
            </div>
          </Trigger>
        </div>
      </div>
    );
  }
}

export default TriggerDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |
| --- | --- | --- | --- | --- | --- |
| popup | 弹层内容 | ReactNode | (() => ReactNode) |  |  |
| popupVisible | 弹层显示/隐藏 | boolean |  |  |  |
| defaultPopupVisible | 弹层默认显示/隐藏 | boolean |  |  |  |
| onPopupVisibleChange | 弹层默认显示/隐藏事件 | (visible?: boolean) => void |  |  |  |
| action | 弹层动作(可设置 hover/click) | string \| string[] |  |  | `hover` |
| popupClassName | 弹层自定义 class | string |  |  |  |
| popupStyle | 弹层自定义样式 | CSSProperties |  |  |  |
| mask | 是否展示遮罩 | boolean | 否 |  |  |
| maskClosable | 点击蒙层是否允许关闭 | boolean | 否 |  |  |
| maskStyle | 蒙层自定义样式 | CSSProperties | 否 |  |  |
| zIndex |  | number | 否 |  |  |
| popupPlacement | 弹层位置 | PopupPlacement | 否 |  |  |
| forceRender | 预渲染 | boolean | 否 |  |  |
| closeAnimation | 关闭动画效果 | boolean | 否 |  |  |
#### PopupPlacement 说明如下：

```
type PopupPlacement = 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'leftTop' | 'rightTop' | 'leftBottom' | 'rightBottom';
```
