# MQrcode 二维码

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

## 代码演示

### 基础用法

引入组件，添加url即可

```jsx
import React from 'react';
import { Qrcode } from '@weapp/ui';

export default class Main extends React.Component {
  render() {
    return (
      <div>
        <p>扫描下方二维码，进入e-teams组件库</p>
        <Qrcode
          url={"https://weapp.eteams.cn/ui/qrcode"}
        />
        <p>调整二维码大小</p>
        <Qrcode
          url={"https://weapp.eteams.cn/ui/qrcode"}
          size={160}
        />
      </div>
    )
  }
}
```

### 自定义二维码

可以自定义颜色、图片、以及渲染方式

```jsx
import React from 'react';
import { Qrcode } from '@weapp/ui';

const imageSettings = {
  src: '/build/ui/demo/assets/photo-view/3.jpeg',
  height: 30,
  width: 30,
  excavate: true,
}
export default class Main extends React.Component {
  render() {
    return (
      <div>
        <p>自定义二维码颜色</p>
        <Qrcode
          url={"https://weapp.eteams.cn/ui/qrcode"}
          fgColor={"#4ba9f2"}
          bgColor={'pink'}
          level={"Q"}
        />
        <p>二维码中间添加图片</p>
        <Qrcode
          url={"https://weapp.eteams.cn/ui/qrcode"}
          imageSettings={imageSettings}
        />
        <p>img渲染</p>
        <Qrcode
          url={"https://weapp.eteams.cn/ui/qrcode"}
          renderAs={'img'}
          imageSettings={imageSettings}
        />
        <p>svg渲染</p>
        <Qrcode
          url={"https://weapp.eteams.cn/ui/qrcode"}
          renderAs={'svg'}
          imageSettings={imageSettings}
        />
      </div>
    )
  }
}
```

## API

### 注意：

在app内部，只有二维码渲染方式为img时，才支持长按识别以及对应功能

### 参数说明如下：

| 参数 | 说明 | 类型 | 可选 | 默认 |
| --- | --- | --- | --- | --- |
| className | 样式类 | String | - | - |
| style | 自定义样式 | Object | - | - |
| level | 二维码纠排错率 | string | `L`\| `M`\| `Q`\| `H` | `L` |
| bgColor | 二维码背景颜色 | string（CSS color） | - | `#FFFFFF` |
| fgColor | 二维码图像颜色 | string（CSS color） | - | `#000000` |
| size | 二维码尺寸 | number | - | 128 |
| renderAs | 渲染类型 | string | `canvas` \| `svg` \| `img` | `canvas` |
| url | 扫二维码打开的地址(必填) | string | - | - |
| imageSettings | 图片设置 | ImageSettings | - | - |
| customRender | 自定义渲染 | (_: any, ele: ReactNode) => ReactNode | - | - |
#### imageSettings

| 参数 | 说明 | 类型 | 可选 | 默认 |
| --- | --- | --- | --- | --- |
| src | 图片地址 | String | 必填 | - |
| x | 图片横坐标位置 | number | - | 0 |
| y | 图片纵坐标位置 | number | - | 0 |
| height | 图片高度 | number | - | - |
| width | 图片宽度 | number | - | - |
| excavate | 是否空出图片区域 | boolean | - | false |
参考 1:[https://github.com/zpao/qrcode.react](https://github.com/zpao/qrcode.react) 

参考 2:[http://zpao.github.io/qrcode.react/](http://zpao.github.io/qrcode.react/)
