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'; Component state = color: '#F5222D' { return <div> <h2>颜色选择器</h2> <ColorPicker ="sketch" = ="bottom" = = /> </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'; Component { const props = top: 150 // 中心点的y left: 350 // 中心点的x show: true // 是否显示菜单 menu: icon: <Icon ="plus-circle" /> text: '拓展' console icon: <Icon ="plus" /> text: '新增' console icon: <Icon ="fullscreen" /> text: '全屏' console icon: <Icon ="fullscreen-exit" /> text: '收回' console icon: <Icon ="form" /> text: '编辑' console icon: <Icon ="qq" /> text: 'qq' console centerButton: <span> <Icon ="plus-circle" /> 点击 </span> {} centerBackground: 'blue' ; return <div> <CircleMenu /> </div> ; }