# Zoom 视图缩放

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

## 代码演示

### 基础用法

视图缩放

```jsx
import { Component } from "react";
import { constants, Zoom, Input, Button, Switch } from "@weapp/ui";

const { InputNumber } = Input

const prefixCls = `${constants.uiPcClsPrefix}-demo-zoom`;

type Props = {}
type State = {
  scale: number
  initialScale: number
  zoomMode: boolean
}

export default class Demo extends Component<Props, State> {

  transformWrapperRef: any
  zoomRef: any
  getZoomRef = (ref: any) => this.zoomRef = ref

  state = {
    scale: 1,
    initialScale: 1,
    zoomMode: true,
  }

  onScaleChange = (value: any) => {
    console.log('this.zoomRef', this.zoomRef)
    const v = Number(value)
    this.setState({
      scale: v,
      initialScale: v
    })
  }

  onSwitchChange = (value: any) => {
    this.setState({ zoomMode: value })
  }

  onButtonClick = () => {
    console.log('onButtonClick')
  }

  render() {
    const { initialScale, scale, zoomMode } = this.state
    return (
      <div className={prefixCls}>
        <h4>配置项</h4>
        <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
          <span>开启缩放:</span>
          <Switch
            style={{ marginLeft: 10 }}
            value={zoomMode}
            onChange={this.onSwitchChange}
          />
        </div>
        <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
          <span>缩放比例:</span>
          <InputNumber
            style={{ marginLeft: 10, width: 50 }}
            value={scale}
            onChange={this.onScaleChange}
            min={0}
            step={0.1}
          />
        </div>
        <h4>缩放展示</h4>
        <Zoom
          zoomMode={zoomMode}
          ref={this.getZoomRef}
          scale={scale}
          wrapperProps={{
            // initialScale: initialScale,
            // onInit: (ref) => this.transformWrapperRef = ref
          }}
        >
          <div style={{ height: 1200, width: 350, background: 'pink', border: '1px solid red' }}>
            <Input id={'weapp-ui-zoom-input'} style={{ width: 200 }} defaultValue={'测试组件库input'} />
            <br />
            <input style={{ width: 200 }} id={'weapp-ui-pure-input'} defaultValue={'测试原生input'}></input>
            <br />
            <Button onClick={this.onButtonClick} >按钮按钮按钮按钮</Button>
            <br />
            <Switch />
          </div>
        </Zoom>
      </div >
    )
  }
}
```

## API

### 注意：

```typescript
组件库引入的三方插件为react-zoom-pan-pinch，版本为3.4.4
1.更详细的props文档：
'https://bettertyped.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page'
2.更全面的demo文档：
'https://bettertyped.github.io/react-zoom-pan-pinch/?path=/story/examples-rerendering-content--rerendering-content'
3.展示所用的TransformWrapper元素和TransformComponent都已经做了封装，可以通过wrapperProps和componentProps进行传参
```

### 类型说明：（请从@weapp/ui 中导出）

```typescript
import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from "react-zoom-pan-pinch";

export type wrapperPropsType = Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchContentRef>

export type componentPropsType = {
  children: React.ReactNode;
  wrapperClass?: string;
  contentClass?: string;
  wrapperStyle?: React.CSSProperties;
  contentStyle?: React.CSSProperties;
  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
  contentProps?: React.HTMLAttributes<HTMLDivElement>;
};

export interface ZoomProps extends BaseProps {
  wrapperProps?: wrapperPropsType
  componentProps?: componentPropsType
};
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| wrapperProps | 外层容器props | wrapperPropsType | 否 |  |
| componentProps | 内容容器props | componentPropsType | 否 |  |
| zoomMode | 是否开启zoom缩放模式 | boolean | 否 | true |
| scale | 缩放比例受控 | number | 否 |  |
| initialScale | 初始缩放大小 | number | 否 |  |
