f248ca05
 Zhang Zhuo
初始化版本 -张卓
|
1
2
3
4
5
6
|
#### React 17版本以上的组件封装
##### flv播放器封装
介绍：支持大屏适配宽度高度百分百，支持视频切换。
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
7
|
解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可
|
|
f248ca05
Zhang Zhuo
初始化版本 -张卓
|
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
使用：
```react
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来自行改变样式
使用：
```react
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>)
}
}
```
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
##### 图片请求base64地址组件
介绍：用来请求加密地址用的，支持切换。
解释：传入请求地址和图片的静态路径，切换做了处理直接改变imgUrl即可
使用：
```react
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
|
|
76d17fa3
Zhang Zhuo
更新bug -张卓
|
80
81
|
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
82
83
84
85
86
87
88
89
90
91
92
93
|
使用：
```react
import {AreaSelete} from "zzreact"
export default class App extends Component {//默认图片样式宽度100%高度自适应
constructor(){
super();
this.state = {
serviceData:[[20, 15], [20, 80], [100, 15]]
}
}
change(val){//点发生改变的回调函数 只要点击点在松开就会触发不会判断只有位置移动了才触发可以自行判断
|
|
76d17fa3
Zhang Zhuo
更新bug -张卓
|
94
|
console.log(val) //注：当添加了disabled=”true“没有此回调函数
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
95
96
97
|
}
render() {
return (<div style={{width:"81.2%",height:"80%"}}>
|
|
96108619
Zhang Zhuo
更新添加文字功能 -张卓
|
98
|
<AreaSelete serviceData={} change={(val)=>this.change(val)}></AreaSelete>
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
99
100
101
102
103
104
105
106
107
108
|
</div>)
}
}
```
支持传的参数：
```react
//如果一下参数不添加就是默认参数
<AreaSelete
|
|
96108619
Zhang Zhuo
更新添加文字功能 -张卓
|
109
110
111
112
113
114
115
116
|
mode="" //两种模式1.默认空为鼠标移动；2.click是点击模式
circleRadius="10" //点击圆的半径
circleBorderWidth="4" //圆边框的宽度
circleBorderColor="#28B1D9" //圆边框的颜色
circleInColor="#28B1D9" //圆区域的颜色
circleSelectColor="#FFF" //圆选中的颜色
lineColor="#28B1D9" //线的颜色
lineWidth="2" //线的宽度
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
117
|
areaColor="rgba(40, 177, 217, 0.2)" //选中区域的颜色支持rgba
|
|
96108619
Zhang Zhuo
更新添加文字功能 -张卓
|
118
|
disabled="true" //默认是false如果是true就是不可滑动
|
|
76d17fa3
Zhang Zhuo
更新bug -张卓
|
119
120
121
122
123
124
|
title= "" //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
titleColor="#000" //文字的颜色 默认黑色
titleFont="14px bold 黑体" //文字的字体
titleLineHeight="" //文字的行高 默认和文字行字体大小一样
position={[10,10]} //文字的位置0是x y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
></AreaSelete>
|
|
d47ac30f
Zhang Zhuo
更新组件区域选择 -张卓
|
125
|
```
|
