bywin 组件库

组件使用文档。

开发

拉取代码

$ git clone https://github.com/wangxiaogang94/bywin-desgin.git

运行

$ cnpm i
$ npm start

打包

$ npm run build
 //下面的打包用于发布npm
$ npm run build:commonjs
$ npm run build:esm
$ npm run copy-css:esm
$ npm run copy-css:lib

发布

$ npm publish

开发

/src/components // 这里是开发的组件 /src/page // 这里是demo和文档

使用

安装

$ npm install bywin-design --save

$ yarn add bywin-design

如果你的网络环境不佳，推荐使用 cnpm。

文档

详细文档。

上传的图片文件转base64

import { fileToBase64 } from 'bywin-design';
// 在antd的upload的beforeUpload中使用 可以完成前端获取上传图片
const image = fileToBase64(file, (base64)=>{
    console.log(base64);
})

水印

• text:

  • Type:String

• isWatermark:

  • Type:bool
  • Default: false

• angle:

  • Type:number
  • Default: -30

import { WaterMark } from 'bywin-design';

const a = () => <WaterMark text={'admin'} isWatermark/>

颜色选择器

import { ColorPicker } from 'bywin-design';

export default class colorpicker extends React.Component {
    state = {
        color: '#F5222D'
    }
    render() {

        return(
            <div>
                <h2>颜色选择器</h2>
                <ColorPicker
                    type="sketch"
                    small
                    color={this.state.color}
                    position="bottom"
                    presetColors={[
                        '#F5222D',
                        '#FA541C',
                        '#FA8C16',
                        '#FAAD14',
                        '#FADB14',
                        '#A0D911',
                        '#52C41A',
                        '#13C2C2',
                        '#1890FF',
                        '#2F54EB',
                        '#722ED1',
                        '#EB2F96',
                    ]}
                    onChangeComplete={(color)=>this.setState({color})}
                />
            </div>
        );
    }
}

扇形菜单

API

属性说明如下：

属性	说明	类型	默认值	版本
top	中心点的y	number	350	1.0.10
left	中心点的x	number	350	1.0.10
show	是否显示菜单	boolean	true	1.0.10
menu	菜单项	ReactNode[]	[]	1.0.10
centerButton	中心按钮	string/ReactNode		1.0.10
centerClick	中心按钮点击事件	function		1.0.10
centerBackground	中心按钮背景	string	#fd485e	1.0.10

menu的子属性

属性	说明	类型	默认值	版本
icon	图标	ReactNode		1.0.10
text	文字	string/ReactNode		1.0.10
onClick	点击事件	function		1.0.10
className	自定义样式class名	string		1.0.10

示例

import { CircleMenu } from 'bywin-design';


export default class menu extends React.Component {
    render() {
        const props = {
            top: 150, // 中心点的y
            left: 350, // 中心点的x
            show: true, // 是否显示菜单
            menu: [
                {
                    icon: <Icon type="plus-circle" />,
                    text: '拓展',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="plus" />,
                    text: '新增',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="fullscreen" />,
                    text: '全屏',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="fullscreen-exit" />,
                    text: '收回',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="form" />,
                    text: '编辑',
                    onClick: i => console.log(i),
                },
                {
                    icon: <Icon type="qq" />,
                    text: 'qq',
                    onClick: i => console.log(i),
                },
            ],
            centerButton: (
                <span>
                    <Icon type="plus-circle" />
                    点击
                </span>
            ),
            centerClick: () => {},
            centerBackground: 'blue',
        };
        return (
            <div>
                <CircleMenu {...props}/>
            </div>
        );
    }
}