# Digital 数字分身

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/digital/freepass)
- 平台：PC
- 维护者：屈正巍

## 代码演示

### 基础用法

数字分身面板

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

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

export default class Demo extends Component {

  state = {
    visible: false,
    personId: '9081482174246831311'
  }

  setVisible = () => {
    this.setState({ visible: true });
  }

  onInputChange = (value: any) => this.setState({ personId: value });

  render() {
    const { visible, personId } = this.state;
    return (
      <div className={prefixCls}>
        <Input placeholder="请输入数字分身的personId" value={personId} onChange={this.onInputChange} style={{ width: 200 }} />
        <br />
        <Button onClick={this.setVisible}>点击打开数字分身</Button>
        <Digital visible={visible} personId={personId} />
      </div>
    )
  }
}
```

## API

```
1.在单独使用时，可以通过 window.WEAPP_UI_DIGITAL_IFRAME_URL 来自定义控制iframe链接展示
其具体url规则如下
const default_pre_url = `https://www.e-cology.com.cn/sp/integration/loginSingle/freepass?appId=bbfb514a4a514dcd862771fe114e6d3e&loginurl=https%3A%2F%2Fcloud.qianliling.com%2Fmain%2Fapp-chat%2Fchat-digital%2Fpersonal%2F`
const pre_url = window.WEAPP_UI_DIGITAL_IFRAME_PRE_URL || default_pre_url;
const url = iframeUrl || window.WEAPP_UI_DIGITAL_IFRAME_URL || `${pre_url}${personId || ''}`;
2.在单独使用时，可以通过 window.WEAPP_UI_DIGITAL_DIALOG_PROPS 来自定义控制测滑框的props
3.在人力卡片中，可以通过 window.WEAPP_UI_HRM_CARD_SHOW_DIGITAL 来自定义控制展示按钮
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| visible | 用于控制弹窗 | boolean | 否 |  |
| personId | 人员id | string | 否 |  |
| onClose | 测滑框关闭回调 | ()=>void | 否 |  |
| dialogProps | 测滑框属性 | any | 否 |  |
