# tf-react-h5-addr

> react版本的h5 addr组件

Latest version **0.1.2** (published 2019-02-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install tf-react-h5-addr
pnpm add tf-react-h5-addr
yarn add tf-react-h5-addr
bun add tf-react-h5-addr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-02-22 |
| First published | 2018-12-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 324.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tffed |

## Links

- npm: https://www.npmjs.com/package/tf-react-h5-addr
- npm.io page: https://npm.io/package/tf-react-h5-addr

## Dependencies (2)

- [tf-jsonp](https://npm.io/package/tf-jsonp.md) ^0.1.0
- [tf-react-sidebar](https://npm.io/package/tf-react-sidebar.md) ^0.1.0

## Recent versions

- 0.1.2 (latest) — 2019-02-22
- 0.1.1 — 2019-02-22
- 0.1.0 — 2018-12-17

## README

## h5版本地址组件

> 本组件基于yarn构建, sidebar组件开发

### 安装

```
npm i tf-react-h5-addr
```

### 引入

```javascript
import AddrSidebar from 'tf-react-h5-addr'
import 'tf-react-h5-addr/dist/index.min.css'
```

### 使用

```javascript
<AddrSidebar
  value={value} // value必须是[{val: '', label: ''}]这种格式

  onOk={ // 选中回调
    (vals) => {
      console.log('onOk',vals)
      this.setState({value: vals})
    }
  }
  onChange={ // 改变回调
    (vals, val) => {
      console.log('onChange',vals, val)
    }
  }

  onCancel={ // 取消回调函数
    () => {}
  }
  urls={['xx', 'xx']} // 请求地址
  requestParams={ // 传递给后端的参数
    {
      dog_ak: 'xx',
      dog_sk: 'xx',
      sourcecode: 'xx'
    }
  }
  level={4} // 支持到哪个层级

  // 以下是从sidebar组件继承的参数
  placement='bottom', // top, bottom, left, right 4个方向
  isClickMaskClose={true}
  onVisibleChange={
    (tag) => {}
  }
  hasMask={true}
  overlayClassName=''
  overlayStyle= {{}}
  visible={false}
>
  <div style={{background: 'red'}} >点击我触发: {this.state.value.map(v => v.label).join(', ')}</div>

</AddrSidebar>
```


### 更新日志

```
0.1.0
  版本发布
```

---
_Source: https://npm.io/package/tf-react-h5-addr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._