-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
160 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,156 @@ | ||
## @hankliu/hankliu-ui | ||
|
||
基于AntDesign@4.x的一个UI组件库,一套企业级 UI 设计语言和 React 组件库 | ||
|
||
### 安装 | ||
|
||
``` | ||
npm install @hankliu/hankliu-ui --save-dev | ||
``` | ||
|
||
或者 | ||
|
||
``` | ||
yarn add -D @hankliu/hankliu-ui | ||
``` | ||
|
||
或者 | ||
|
||
``` | ||
pnpm add -D @hankliu/hankliu-ui | ||
``` | ||
|
||
### 使用 | ||
``` tsx | ||
import { Button, ImageCropper } from "@hankliu/hankliu-ui"; | ||
|
||
const DEFAULT_PROPS = { | ||
aspectRatios: [ | ||
{ | ||
title: 'free' | ||
}, | ||
{ | ||
value: 1/1, | ||
title: '1:1' | ||
}, | ||
{ | ||
value: 2/1, | ||
title: '2:1' | ||
}, | ||
{ | ||
value: 4/3, | ||
title: '4:3' | ||
} | ||
], | ||
title: "图像裁剪", | ||
previewTitle: "此为预览图片", | ||
tip: ( | ||
<div> | ||
<div> | ||
平台支持 JPG、PNG 图片格式; | ||
<br /> | ||
每张图片文件请保持在 10Mb 以内 | ||
</div> | ||
</div> | ||
) | ||
}; | ||
|
||
class ImageCropperDefault extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
url: "https://github.com/hankliu62/hankliu62.github.com/assets/8088864/91a13d0f-4685-411e-90bf-d8ecbec2ab56" | ||
}; | ||
} | ||
|
||
onChooseImage = () => { | ||
ImageCropper.selectImage().then(img => this.setState({url: img.url})) | ||
} | ||
|
||
onUpload = (data) => { | ||
this.setState({ | ||
okButtonProps: { loading: true } | ||
}) | ||
|
||
// 上传操作 | ||
setTimeout(() => { | ||
this.setState({ | ||
cropperVisible: false, | ||
okButtonProps: { loading: false } | ||
}) | ||
}, 3000) | ||
} | ||
|
||
render() { | ||
const { cropperProps, okButtonProps, cropperVisible, url } = this.state; | ||
return ( | ||
<div> | ||
{ | ||
cropperVisible && ( | ||
<ImageCropper | ||
{...cropperProps} | ||
url={url} | ||
open={cropperVisible} | ||
onCancel={() => this.setState({ cropperVisible: false })} | ||
onOk={this.onUpload} | ||
onReupload={this.onChooseImage} | ||
okButtonProps={okButtonProps} | ||
/> | ||
) | ||
} | ||
<Button | ||
className="mr-8" | ||
onClick={() => | ||
ImageCropper.selectImage().then(img => { | ||
this.setState({ url: img.url, cropperProps: DEFAULT_PROPS, cropperVisible: true }) | ||
}) | ||
} | ||
> | ||
裁剪图片 | ||
</Button> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
ReactDOM.render(<ImageCropperDefault />, mountNode); | ||
``` | ||
|
||
## 特性 | ||
|
||
- 🍉 基于 `AntDesign@4.x`,具有其所有特性。 | ||
- 🍑 新增更多的高质量 `React` 组件,开箱即用。 | ||
|
||
|
||
## 兼容环境 | ||
|
||
- 现代浏览器和 IE11(需要 [polyfills](https://4x.ant.design/docs/react/getting-started-cn#兼容性))。 | ||
- 支持服务端渲染。 | ||
- [Electron](https://www.electronjs.org/) | ||
|
||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron | | ||
| --- | --- | --- | --- | --- | | ||
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | | ||
|
||
## 链接 | ||
|
||
- [首页](https://hankliu62.github.io/hankliu-ui) | ||
|
||
## 本地开发 | ||
|
||
克隆到本地开发: | ||
|
||
```bash | ||
$ git clone https://github.com/hankliu62/hankliu-ui.git hankliu-ui | ||
$ cd hankliu-ui | ||
$ npm install | ||
$ npm start | ||
``` | ||
|
||
打开浏览器访问 http://127.0.0.1:8001 。 | ||
|
||
## 免责声明 | ||
|
||
本项目只做个人练习以及私人项目使用,非商业用途,如有侵权,请告知本人进行删除。 | ||
|
||
非商业用途产品,如过 `Fork` 本项目使用于商业用途,造成法律责任,请自行解决,与本人无关。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters