@hankliu/hankliu-ui

🥭 基于 [email protected] 的一个 UI 组件库，一套企业级 UI 设计语言和 React 组件库

安装

npm install @hankliu/hankliu-ui --save-dev

或者

yarn add -D @hankliu/hankliu-ui

或者

pnpm add -D @hankliu/hankliu-ui

使用

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);

特性

• 🍉 基于 [email protected]，具有其所有特性。
• 🍑 新增更多的高质量 React 组件，开箱即用。

兼容环境

• 现代浏览器和 IE11（需要 polyfills）。
• 支持服务端渲染。
• Electron

| IE / Edge | Firefox | Chrome | Safari | Electron | | --- | --- | --- | --- | --- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

链接

• 首页

本地开发

克隆到本地开发:

$ git clone https://github.com/hankliu62/hankliu-ui.git hankliu-ui
$ cd hankliu-ui
$ npm install
$ npm start

打开浏览器访问 http://127.0.0.1:6200 。

免责声明

本项目只做个人练习以及私人项目使用，非商业用途，如有侵权，请告知本人进行删除。

非商业用途产品，如过 Fork 本项目使用于商业用途，造成法律责任，请自行解决，与本人无关。