Boke-ui-r NPM | npm.io

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