Zhang Zhuo / ObjectEVEComponents

React 17版本以上的组件封装

flv播放器封装

介绍：支持大屏适配宽度高度百分百，支持视频切换。

解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可

使用：

import {FlvCom} from "zzreact"
export default class App extends Component {
    constructor() {
        super();
        this.state = {
            vidoeUrl: ""
        }
    }
    render() {
        let {vidoeUrl} = this.state
        return <FlvCom vidoeUrl={vidoeUrl}></FlvCom>
    }
}

time时间组件封装

介绍：用来大屏展示时间用

解释：可以加入className来自行改变样式

使用：

import {Timer} from "zzreact"

export default class App extends Component {
    render() {//通过下面的className写在css中样式就会生效
        //type可以不传默认YYYY-MM-DD HH:mm:ss
        //也可以改变，规则和moment.js中format的规则一致
        return (<div>
            <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>
            <Timer className="timerComCssss"></Timer>
        </div>)
    }
}

图片请求base64地址组件

介绍：用来请求加密地址用的，支持切换。

解释：传入请求地址和图片的静态路径，切换做了处理直接改变imgUrl即可

使用：

import {ImgCom} from "zzreact"
//httpImg是必穿参数
export default class App extends Component {//默认图片样式宽度100%高度自适应
    constructor(){
        super();
        this.state = {
            imgUrl:"C:/*****"
        }
    }
    render() {
        return (<ImgCom httpImg="http://***"  imgUrl={imgUrl}></ImgCom>)
    }
}

区域选择组件封装

介绍：用来在视频上描绘区域

解释：可以设置模式点击模式和鼠标移动模式，支持移动端手指触摸移动。支持适配百分比会获取父元素的宽高来渲染画布的大小，如果父元素没有默认宽高是100px

使用：

import {AreaSelete} from "zzreact"
export default class App extends Component {//默认图片样式宽度100%高度自适应
    constructor(){
        super();
        this.state = {
            serviceData:[[20, 15], [20, 80], [100, 15]]
        }
    }
    change(val){//点发生改变的回调函数  只要点击点在松开就会触发不会判断只有位置移动了才触发可以自行判断
        console.log(val)
    }
    render() {
        return (<div style={{width:"81.2%",height:"80%"}}>
                    <AreaSelete serviceData={} change={(val)=>this.change(val)}></AreaSelete>
                </div>)
    }
}

支持传的参数：

//如果一下参数不添加就是默认参数 
<AreaSelete
     mode=""                         //两种模式1.默认空为鼠标移动；2.click是点击模式
     circleRadius="10"               //点击圆的半径
     circleBorderWidth="4"           //圆边框的宽度
     circleBorderColor="#28B1D9"     //圆边框的颜色
     circleInColor="#28B1D9"         //圆区域的颜色
     circleSelectColor="#FFF"        //圆选中的颜色
     lineColor="#28B1D9"             //线的颜色
     lineWidth="2"                   //线的宽度
     areaColor="rgba(40, 177, 217, 0.2)"    //选中区域的颜色支持rgba
     disabled="true"                //默认是false如果是true就是不可滑动
     title: ""             //文字的内容填写就有    \n是换行
     titleColor:"#000"     //文字的颜色  默认黑色
     titleFont:"14px bold 黑体"  //文字的字体
     titleLineHeight:""         //文字的行高默认和文字行高一样
     position:[10,10]           //文字的位置0是x  y是一  里面是判断x最大的y最小的值来进行判断
     ></AreaSelete>