boke-ui-r

boke common components with ract boke React 组件库

Install

npm install --save boke-ui-r

Usage

import React, { Component } from 'react'

import MyComponent from 'boke-ui-r'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}

Components

• UploadImgsToOss
• LocationModal

UploadImgsToOss

上传图片到Oss对象存储，包含单张、多张图片上传，图片删除，拖拽改变图片顺序，设置默认图片等功能。

| 参数 | 说明 | 类型 | 默认值 | | --------------| ------------------------------------------|-----------------------------|-------| | *oss | 获取对象存储权限函数 | function(){返回pormise对象} | {} | | *getImageUrls | 获取图片链接，上传成功和拖拽修改都会触发此函数|function(imageUrls) | - | | maxNum | 最多上传的图片数量 |number | 1 | | imageUrls | 已经上传的图片链接，用于编辑 |array | [] | | definedImage | 默认图片链接（不设置此属性将不会有默认功能） | string |'undefined' | | defineChange | 设置默认图片回调函数 | function(img,index) | - | | width | 设置宽 | number | 100 | | height | 设置高 | number | 100 |

LocationModal

demo

import React, { Component } from 'react'
import {LocationModal} from 'boke-ui-r'

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      position: {
        X: '',
        Y: ''
      },
      range: {
        width: 80,
        height:40
      }
    }
  }
  getPosition = (position) => {
    this.setState({position})
  }
  changeX = (e) => {
    this.setState({
      position:{
        X: e.target.value,
        Y: this.state.position.Y
      }
    })
  }
  changeY = (e) => {
    this.setState({
      position:{
        X: this.state.position.X,
        Y: e.target.value
      }
    })
  }
  changeRangeWidth = (e) => {
    this.setState({
      range: {
        width: e.target.value,
        height: this.state.range.height
      }
    })
  }
  changeRangeHeight = (e) => {
    this.setState({
      range: {
        width: this.state.range.width,
        height: e.target.value
      }
    })
  }
  render () {
    const {position, range} = this.state 
    let setChildren = <div>
      <p>标点坐标：</p>
      <div>
        <span>x</span><span><input value={position.X} type="number" onChange={this.changeX} style={{width: '60px'}} /></span>
        <span>y</span><span><input value={position.Y} type="number" onChange={this.changeY}  style={{width: '60px'}}/></span>
      </div>
      <p>最大使用范围</p>
      <div>
        <span>宽：</span><span><input type="number" value={range.width} onChange={this.changeRangeWidth} style={{width: '60px'}} /></span>
        <span>高：</span><span><input type="number" value={range.height} onChange={this.changeRangeHeight} style={{width: '60px'}}/></span>
      </div>
    </div>
    return (
      <div>
        <LocationModal visible={true}
          setChildren={setChildren}
          getPosition={this.getPosition}
          position={position}
          range={range} >
          <div style={{width: '100%',height: '100%'}}>aa</div>
        </LocationModal>
      </div>
    )
  }
}

选择个性坐标弹框。 | 参数 | 说明 | 类型 | 默认值 | | --------------| ------------------------------------------|-----------------------------|-------| | *visible | 弹框开关 | bool | false| | width | 弹框内容的宽度 |number | 1116| | height | 弹框高度 |number | 900 | | setChildren | 弹框设置模块内容 |element | - | | getPosition | 获取位置 | function |'undefined' | | position | 个性坐标(详情请看坐标位置position)| object | - | | range | 个信范围(详情请看坐标范围range) | object | - |

position

| 参数 | 说明 | 类型 | 默认值 | |------|----------|-----|--------| | X | X轴的坐标|number|-1 | | Y | Y轴的坐标|number|-1 |

range

| 参数 | 说明 | 类型 | 默认值 | |------|----------|-----|--------| |wdith | 个性的宽 |number| 80 | |height| 个性的高 |number| 40 |

License

MIT ©