1 | # 简介
|
2 | SeedsUI,专为移动设备设计的UI框架,组件全面可换肤,以后将会有react版和vue版、h5版
|
3 |
|
4 | # 安装
|
5 | ```js
|
6 | npm install seedsui-react --save
|
7 | ```
|
8 |
|
9 | # 导入组件
|
10 |
|
11 | ## 静态导入
|
12 | 工程化项目
|
13 | ```js
|
14 | import 'seedsui-react/build/seedsui.min.css';
|
15 | import {Chat} from 'seedsui-react';
|
16 | ```
|
17 | HTML项目
|
18 | ```css
|
19 | <link rel="stylesheet" href="https://unpkg.com/seedsui-react/build/seedsui.min.css">
|
20 | <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
21 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
|
22 | <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
|
23 | <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
|
24 | <script src="https://unpkg.com/seedsui-react/build/seedsui-react.min.js"></script>
|
25 | <script type="text/babel">
|
26 | ReactDOM.render(
|
27 | <seedsui.Chat>聊天框</seedsui.Chat>,
|
28 | document.getElementById('root')
|
29 | );
|
30 | </script>
|
31 | ```
|
32 | ## 动态导入
|
33 | 用于工程化项目,建议使用动态导入, 以节省打包文件体积, 动态导入需要Less环境支持:
|
34 | ```js
|
35 | npm install less less-loader --save-dev
|
36 | ```
|
37 | 修改 webpack.config.dev.js 和 webpack.config.prod.js 配置文件:<br>
|
38 | 搜索“/\.css”,修改规则为/\.css|.less$/,use -> {loader: require.resolve('less-loader')}
|
39 |
|
40 | ```js
|
41 | // 导入seedsui基础库
|
42 | import 'components/seedsui/index.less'; // 需要手动配置,见下节
|
43 | import 'seedsui-react/lib/PrototypeArray.js';
|
44 | import 'seedsui-react/lib/PrototypeMath.js';
|
45 | import 'seedsui-react/lib/PrototypeObject.js';
|
46 | import 'seedsui-react/lib/PrototypeString.js';
|
47 | import 'seedsui-react/lib/PrototypeDate.js';
|
48 | // 导入组件
|
49 | import Chat from 'seedsui-react/lib/Chat';
|
50 | ```
|
51 | ### index.less手动配置:
|
52 | #### 1.图标 src/components/seedsui/iconfont.less:<br>
|
53 | [下载模板](https://unpkg.com/seedsui-react/lib/seedsui-iconfont.less),放入src/components/seedsui/iconfont.less后修改
|
54 | <br><br>
|
55 | #### 2.变量 src/components/seedsui/variables.less:<br/>
|
56 | [下载模板](https://unpkg.com/seedsui-react/lib/seedsui-variables.less),放入src/components/seedsui/variables.less后修改
|
57 | <br><br>
|
58 | #### 3.组件 src/components/seedsui/components.less:<br/>
|
59 | [下载模板](https://unpkg.com/seedsui-react/lib/seedsui-components.less),放入src/components/seedsui/components.less后修改<br>
|
60 | 引入地址修改如:
|
61 | ```less
|
62 | @import "global/top/appearance.less";
|
63 | ```
|
64 | 前缀改为../../../node_modules/seedsui-react/lib/
|
65 | ```less
|
66 | @import "../../../node_modules/seedsui-react/lib/global/top/appearance.less";
|
67 | ```
|
68 |
|
69 | #### 三个less汇集 src/components/seedsui/index.less:
|
70 | ```less
|
71 | // 图标
|
72 | // @import "../../../node_modules/seedsui-react/lib/seedsui-iconfont.less";
|
73 | @import "iconfont.less";
|
74 | // 变量,依赖图标(换肤文件)
|
75 | // @import "../../../node_modules/seedsui-react/lib/seedsui-variables.less";
|
76 | @import "variables.less";
|
77 | // 组件,依赖变量库
|
78 | // @import "../../../node_modules/seedsui-react/lib/seedsui-components.less";
|
79 | @import "components.less";
|
80 | ```
|
81 |
|
82 |
|
83 | # 国际化
|
84 | [下载国际化文件](https://unpkg.com/seedsui-react/lib/lang.js), 修改window._seeds_lang对象即可
|
85 |
|
86 |
|
87 | # Component
|
88 | - [Actionsheet](#actionsheet) 卡片弹框
|
89 | - [Alert](#alert) 弹出框
|
90 | - [Badge](#badge) 徽章
|
91 | - [BiClock](#biclock) 时钟
|
92 | - [BiDoughnut](#bidoughnut) 环形图
|
93 | - [BiGauge](#bigauge) 导航
|
94 | - [Bridge](#bridge) 桥接
|
95 | - [Button](#button) 按钮
|
96 | - [Calendar](#calendar) 日历
|
97 | - [Card](#card) 卡片
|
98 | - [Carrousel](#carrousel) 轮播
|
99 | - [Chat](#chat) 聊天
|
100 | - [Checkbox](#checkbox) 复选框
|
101 | - [Container](#container) page主体
|
102 | - [Counter](#counter) 计数器
|
103 | - [Dialog](#dialog) 自定义弹出框
|
104 | - [Dot](#dot) 小点点
|
105 | - [Dragrefresh](#dragrefresh) 下拉刷新
|
106 | - [Dropdown](#dropdown) 页签菜单
|
107 | - [Emoji](#emoji) 表情
|
108 | - [Footer](#footer) page底部
|
109 | - [Grid](#grid) 栅格
|
110 | - [Group](#group) 分组
|
111 | - [Handsign](#handsign) 手写签名
|
112 | - [Header](#header) page头部
|
113 | - [ImgMark](#imgmark) 图片标注
|
114 | - [ImgLazy](#imglazy) 懒人加载
|
115 | - [IndexBar](#imguploader) 侧边索引栏
|
116 | - [InputArea](#inputarea) 多行文本框
|
117 | - [InputCity](#inputcity) 城市选择
|
118 | - [InputColor](#inputcolor) 颜色选择框
|
119 | - [InputDate](#inputdate) 日期选择
|
120 | - [InputLocation](#inputlocation) 定位
|
121 | - [InputNumber](#inputnumber) 数字输入框
|
122 | - [InputPassword](#inputpassword) 密码框
|
123 | - [InputPhone](#inputphone) 手机号码输入框
|
124 | - [InputPicker](#inputpicker) 滚动选择框
|
125 | - [InputPre](#inputpre) 自增高输入框
|
126 | - [InputRange](#inputrange) 范围选择框
|
127 | - [InputSafe](#inputsafe) 安全强度检验框
|
128 | - [InputSelect](#inputselect) 选择框
|
129 | - [InputStar](#inputstar) 评分框
|
130 | - [InputText](#inputtext) 文本框
|
131 | - [InputVerify](#inputverify) 验证码文本框
|
132 | - [Verify](#verify) 验证码文本框
|
133 | - [Jcrop](#jcrop) 图片裁切
|
134 | - [Legend](#legend) 标题
|
135 | - [List](#list) 列表
|
136 | - [ListPull](#listpull) 可推动列表
|
137 | - [Loading](#loading) 加载中
|
138 | - [LotteryWheel](#lotterywheel) 奖品轮播
|
139 | - [Mark](#mark) 标记
|
140 | - [Marquee](#marquee) 跑马灯
|
141 | - [MenuTiled](#menutiled) 平铺弹出菜单
|
142 | - [MenuTree](#menutree) 侧边树形菜单
|
143 | - [Notice](#notice) 公告
|
144 | - [NumBox](#numbox) 数字加减框
|
145 | - [NumBoxPop](#numboxpop) 数字加减弹出框
|
146 | - [NumBoxPopPointer](#numboxpoppointer) 数字加减指针
|
147 | - [OnOff](#onoff) 开关
|
148 | - [Page](#page) 页面
|
149 | - [PagePull](#pagepull) 可推动页面
|
150 | - [Peg](#peg) 小竖条
|
151 | - [Picker](#picker) 滚动选择弹框
|
152 | - [PickerCity](#pickercity) 城市选择弹框
|
153 | - [PickerDate](#pickerdate) 日期选择弹框
|
154 | - [Player](#player) 视频播放器
|
155 | - [Popover](#popover) 箭头弹框
|
156 | - [Progress](#progress) 进度条
|
157 | - [PDFView](#pdfview) PDF文件预览
|
158 | - [Radio](#radio) 单选框
|
159 | - [RouteComment](#routecomment) 评价路由
|
160 | - [SearchBoard](#searchboard) 搜索面板
|
161 | - [SelectPicker](#selectpicker) 选择弹框
|
162 | - [Star](#star) 星星
|
163 | - [Stencil](#stencil) 加载模板
|
164 | - [Sticker](#sticker) 标签贴
|
165 | - [Tabbar](#tabbar) 页签
|
166 | - [Ticket](#ticket) 票券
|
167 | - [Timeline](#timeline) 时间轴
|
168 | - [Timepart](#timepart) 时间段
|
169 | - [Titlebar](#titlebar) 标题栏
|
170 | - [Toast](#toast) 提示弹框
|
171 | - [Tree](#tree) 树结构
|
172 | - [Verify](#verify) 验证码文本框
|
173 |
|
174 |
|
175 | # Utils
|
176 | - [MapUtil](#maputil) 地图工具
|
177 | - [GeoUtil](#geoutil) 地理工具
|
178 |
|
179 |
|
180 | ## Actionsheet
|
181 | [卡片框](https://unpkg.com/seedsui-react/src/lib/Actionsheet/Actionsheet.js)
|
182 | ### 属性
|
183 | ```javascript
|
184 | <Actionsheet
|
185 | portal={传送dom object, 默认document.getElementById('root')}
|
186 | show={*显隐 bool, 默认false}
|
187 | duration={动画时长 number, 默认见seedsui-variables.less}
|
188 |
|
189 | list={*按钮项 array, 如: [{caption: string}]}
|
190 | onClick={点击项 func(e, item, index), 有此属性才显示确定按钮}
|
191 |
|
192 | maskStyle={遮罩style object, 默认无}
|
193 | maskClassName={遮罩className string, 默认无, 基础'mask actionsheet-mask'}
|
194 | onClickMask={点击遮罩 func(e), 默认无}
|
195 |
|
196 | style={容器style object, 默认无}
|
197 | className={容器className string, 默认无, 基础'actionsheet'}
|
198 |
|
199 | groupStyle={组style object, 默认无}
|
200 | groupClassName={组className string, 默认无, 基础'actionsheet-group'}
|
201 |
|
202 | optionStyle={项style object, 默认无}
|
203 | optionClassName={项className string, 默认'border-b', 基础'actionsheet-option'}
|
204 |
|
205 | cancelStyle={取消按钮style object, 默认无}
|
206 | cancelClassName={取消按钮className string, 默认无, 基础'actionsheet-cancel'}
|
207 | cancelCaption={取消按钮文字 node, 默认'取消'}
|
208 | onClickCancel={点击取消按钮 func(e), 默认无, 有此属性才显示取消按钮}
|
209 | />
|
210 | ```
|
211 | ### 示例
|
212 | ```javascript
|
213 | import Actionsheet from 'seedsui-react/lib/Actionsheet';
|
214 | onClickActionsheet = (item, index) => {
|
215 | console.log(item) // => {caption: '菜单1'}
|
216 | }
|
217 | <Actionsheet
|
218 | show={this.state.actionsheetShow}
|
219 | list={[{caption: '菜单1'}, {caption: '菜单2'}]}
|
220 | onClick={this.onClickActionsheet}
|
221 | onClickCancel={this.hideActionsheet}
|
222 | onClickMask={this.hideActionsheet}/>
|
223 | ```
|
224 | [返回目录](#component)
|
225 |
|
226 |
|
227 | ## Alert
|
228 | [对话框](https://unpkg.com/seedsui-react/src/lib/Alert/Alert.js)
|
229 | ### 建议
|
230 | Alert组件更适用于复杂的定制弹框,一般弹框建议直接使用Api直接调用:
|
231 | * alert框:Bridge.showAlert(msg)代替
|
232 | * confirm框:Bridge.showConfirm(msg, {onSuccess: fn, onError: fn})代替
|
233 |
|
234 | 详见[Bridge 桥接库](#bridge) 桥接库
|
235 |
|
236 | ### 属性
|
237 | ```javascript
|
238 | <Alert
|
239 | portal={传送dom object, 默认document.getElementById('root')}
|
240 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
241 | show={*显隐 bool, 默认false}
|
242 | duration={动画时长 number, 默认见seedsui-variables.less}
|
243 |
|
244 | maskStyle={遮罩style object, 默认无}
|
245 | maskClassName={遮罩className string, 默认无}
|
246 | onClickMask={点击遮罩 func, 默认无}
|
247 |
|
248 | style={容器style object, 默认无}
|
249 | className={容器className string, 默认无}
|
250 |
|
251 | caption={标题文字 node, 默认无}
|
252 | captionStyle={标题style object, 默认无}
|
253 | captionClassName={标题className string, 默认无}
|
254 |
|
255 | icon={图标dom node, 默认无}
|
256 |
|
257 | contentStyle={内容style object, 默认无}
|
258 | contentClassName={内容className string, 默认无}
|
259 | children={内容 node, 默认无}
|
260 |
|
261 | submitStyle={确定按钮style object, 默认无}
|
262 | submitClassName={确定按钮className string, 默认无}
|
263 | submitCaption={确定按钮文字 node, 默认'确定'}
|
264 | disabled={确定按钮是否禁用 bool, 默认false}
|
265 | onClickSubmit={点击确定按钮 func(args), 有此属性才显示确定按钮}
|
266 |
|
267 | cancelStyle={取消按钮style object, 默认无}
|
268 | cancelClassName={取消按钮className string, 默认无}
|
269 | cancelCaption={取消按钮文字 node, 默认'取消'}
|
270 | onClickCancel={点击取消按钮 func(args), 默认无, 有此属性才显示取消按钮}
|
271 | />
|
272 | ```
|
273 |
|
274 | ### 示例
|
275 | ```javascript
|
276 | import Alert from 'seedsui-react/lib/Alert';
|
277 | <Alert
|
278 | show={this.state.alertShow}
|
279 | submitCaption="确定按钮"
|
280 | onClickSubmit={this.onSubmitAlert}>
|
281 | 提示内容
|
282 | </Alert>
|
283 | ```
|
284 | [返回目录](#component)
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 |
|
292 | ## Badge
|
293 | [徽章](https://unpkg.com/seedsui-react/src/lib/Badge/Badge.js)
|
294 | ### 属性
|
295 | ```javascript
|
296 | <Badge
|
297 | className={容器className string, 默认无, 基础'badge',内容大于两位时会加上'badge-max-width'}
|
298 | style={容器style object, 默认无}
|
299 | limit={位数限制 number, 默认2, 如:1000,将显示99+}
|
300 | ellipsis={位数限制省略号 string, 默认'+'}
|
301 | {...others}
|
302 | />
|
303 | ```
|
304 | ### 示例
|
305 | ```javascript
|
306 | import Actionsheet from 'seedsui-react/lib/Actionsheet';
|
307 |
|
308 | const BadgeStyle = {
|
309 | position: 'absolute',
|
310 | left: '13px',
|
311 | top: '-5px',
|
312 | };
|
313 |
|
314 | <Icon className="icon-cart">
|
315 | {cartCount > 0 && <Badge style={BadgeStyle}>{cartCount}</Badge>}
|
316 | </Icon>
|
317 | ```
|
318 | [返回目录](#component)
|
319 |
|
320 |
|
321 |
|
322 |
|
323 | ## BiClock
|
324 | [时钟](https://unpkg.com/seedsui-react/src/lib/BiClock/BiClock.js)
|
325 | ### 属性
|
326 | ```javascript
|
327 | <BiClock
|
328 | lineWidth={边框宽度px number, 默认2}
|
329 | size={宽高大小px number, 默认50}
|
330 | time={时间 string, 默认'00:00'} // 格式 hh:mm
|
331 | className={容器className string, 默认无, 基础'bi-clock'}
|
332 | style={容器style object, 默认无}
|
333 |
|
334 | duration={动画时长 number, 默认1000}
|
335 | delay={延时 number, 默认100}
|
336 | />
|
337 | ```
|
338 | ### 示例
|
339 | ```javascript
|
340 | import BiClock from 'seedsui-react/lib/BiClock';
|
341 |
|
342 | <BiClock time="11:30"/>
|
343 | ```
|
344 | [返回目录](#component)
|
345 |
|
346 |
|
347 |
|
348 | ## BiDoughnut
|
349 | [环形图](https://unpkg.com/seedsui-react/src/lib/BiDoughnut/BiDoughnut.js)
|
350 | ### 属性
|
351 | ```javascript
|
352 | <BiDoughnut
|
353 | lineWidth={边框宽度px number, 默认3}
|
354 | size={宽高大小px number, 默认50}
|
355 | duration={动画时长 number, 默认1000}
|
356 | rotate={旋转角度 number, 默认0, 最大360}
|
357 | delay={延时 number, 默认100}
|
358 |
|
359 | className={容器className string, 默认无, 基础'bi-doughtut'}
|
360 | captionClassName={标题className string, 默认无, 基础'bi-doughtut-caption'}
|
361 | captionStyle={标题style object, 默认无}
|
362 | >
|
363 | 标题内容
|
364 | <BiDoughnut>
|
365 | ```
|
366 | ### 示例
|
367 | ```javascript
|
368 | import BiDoughnut from 'seedsui-react/lib/BiDoughnut';
|
369 |
|
370 | <BiDoughnut rotate={15} className="success">
|
371 | 待审批
|
372 | </BiDoughnut>
|
373 | <BiDoughnut rotate={45} className="warn">
|
374 | 准备中
|
375 | </BiDoughnut>
|
376 | <BiDoughnut rotate={315} className="submit">
|
377 | 进行中
|
378 | </BiDoughnut>
|
379 | <BiDoughnut rotate={360} className="disabled">
|
380 | 已结束
|
381 | </BiDoughnut>
|
382 | <BiDoughnut rotate={120} className="cancel">
|
383 | 已取消
|
384 | </BiDoughnut>
|
385 | ```
|
386 | [返回目录](#component)
|
387 |
|
388 |
|
389 |
|
390 |
|
391 | ## BiGauge
|
392 | [仪表盘](https://unpkg.com/seedsui-react/src/lib/BiGauge/BiGauge.js)
|
393 | ### 属性
|
394 | ```javascript
|
395 | <BiGauge
|
396 | duration={动画时长 number, 默认1000}
|
397 | rotate={旋转角度 number, 默认0, 最大270}
|
398 | delay={延时 number, 默认100}
|
399 |
|
400 | className={容器className string, 默认无, 基础'bi-gauge-box'}
|
401 | style={容器style object, 默认无}
|
402 | captionClassName={标题className string, 默认无, 基础'bi-gauge-caption'}
|
403 | captionStyle={标题style object, 默认无}
|
404 | >
|
405 | 标题内容
|
406 | <BiGauge>
|
407 | ```
|
408 | ### 示例
|
409 | ```javascript
|
410 | import BiGauge from 'seedsui-react/lib/BiGauge';
|
411 |
|
412 | <BiGauge rotate={15} className="success">
|
413 | 15
|
414 | </BiGauge>
|
415 | ```
|
416 | [返回目录](#component)
|
417 |
|
418 |
|
419 |
|
420 |
|
421 | ## Bridge
|
422 | [桥接](https://unpkg.com/seedsui-react/src/lib/Bridge/index.js)
|
423 | , 现支持四个平台的桥接适配, 浏览器、订货、外勤、微信客户端
|
424 | ### 对象
|
425 | ```javascript
|
426 | Bridge:{
|
427 | platform: 'browser', // 根据不同的环境将返回不同的结果 'browser' | 'dinghuo' | 'waiqin' | 'weixin'
|
428 | debug: false, // 在浏览器中,为true时将会启动调试模式,会使用假数据
|
429 | config: fn, // Bridge.config(); 在应用初始化时需要执行此方法, 连接桥接
|
430 | getAppVersion: fn, // 获取版本信息
|
431 | chooseImage: fn({
|
432 | count: number,
|
433 | sizeType: ['original', 'compressed'],
|
434 | sourceType: ['album', 'camera'],
|
435 | success: fn({sourceType: 'camera | album', errMsg: 'chooseImage:ok', localIds: array}),
|
436 | fail: fn({code: number, errMsg: 'chooseImage:fail'})
|
437 | }),
|
438 | uploadImage: fn({
|
439 | success: fn({mediaUrl: string, errMsg: 'uploadImage:ok', serverId: '1237378768e7q8e7r8qwesafdasdfasdfaxss111'}),
|
440 | }),
|
441 | previewImage: fn({
|
442 | urls:'需要预览的图片http链接列表',
|
443 | current:'当前显示图片的http链接'
|
444 | }),
|
445 | getContactMore: fn({ // 外勤客户端专用, 人员插件多选
|
446 | selectedIds: '5330457627710680963,5330457627710680963',
|
447 | aclType: '0', // 人员权限, 0只能看到下属, 不传或者其他的参数为全部人员, 默认为空串
|
448 | onSuccess: fn([{
|
449 | "id": "5330457627710680963",
|
450 | "name": "张三"
|
451 | }])
|
452 | }),
|
453 | getContact: fn({ // 外勤客户端专用, 人员插件单选
|
454 | id: '5330457627710680963',
|
455 | aclType: '0', // 人员权限, 0只能看到下属, 不传或者其他的参数为全部人员, 默认为空串
|
456 | onSuccess: fn({
|
457 | "id": "5330457627710680963",
|
458 | "name": "张三"
|
459 | })
|
460 | }),
|
461 | getCustomerMore: fn({ // 外勤客户端专用, 客户插件多选
|
462 | selectedIds: '5330457627710680963,5330457627710680963',
|
463 | tradeType: '1', // 1:客户 2:经销商 3:门店 空串:全部, 默认为空串
|
464 | hiddenAdd: true, // 是否隐藏添加按钮, 默认true
|
465 | onSuccess: fn([{
|
466 | "check": true,
|
467 | "distance": 31,
|
468 | "labelType": 0,
|
469 | "addr": "南京市建邺区康文路康缘智汇港附近",
|
470 | "approval_status": "3",
|
471 | "code": "20180403004",
|
472 | "cooperate_status": "1",
|
473 | "district_id": "",
|
474 | "id": "5330457627710680963",
|
475 | "lat": "",
|
476 | "location": "31.983362,118.73069",
|
477 | "lon": "",
|
478 | "manager_name": "",
|
479 | "name": "20180403003",
|
480 | "name_py": "20180403004 20180403004",
|
481 | "trade_type": "3",
|
482 | "type_id": "",
|
483 | "type_image": ""
|
484 | }])
|
485 | }),
|
486 | getCustomer: fn({ // 外勤客户端专用, 客户插件单选
|
487 | id: '5330457627710680963',
|
488 | tradeType: '1', // 1:客户 2:经销商 3:门店 空串:全部, 默认为空串
|
489 | hiddenAdd: true, // 是否隐藏添加按钮, 默认true
|
490 | onSuccess: fn({
|
491 | "check": true,
|
492 | "distance": 31,
|
493 | "labelType": 0,
|
494 | "addr": "南京市建邺区康文路康缘智汇港附近",
|
495 | "approval_status": "3",
|
496 | "code": "20180403004",
|
497 | "cooperate_status": "1",
|
498 | "district_id": "",
|
499 | "id": "5330457627710680963",
|
500 | "lat": "",
|
501 | "location": "31.983362,118.73069",
|
502 | "lon": "",
|
503 | "manager_name": "",
|
504 | "name": "20180403003",
|
505 | "name_py": "20180403004 20180403004",
|
506 | "trade_type": "3",
|
507 | "type_id": "",
|
508 | "type_image": ""
|
509 | })
|
510 | }),
|
511 | getCustomerType: fn({ // 外勤客户端专用, 客户插件, 客户类型选择
|
512 | id: '5330457627710680963',
|
513 | name: '类型1',
|
514 | tradeType: '1', // 1:客户 2:经销商 3:门店 其它为客户, 默认为空串
|
515 | onSuccess: fn([{
|
516 | "id": "5330457627710680963",
|
517 | "name": "类型1"
|
518 | }])
|
519 | }),
|
520 | getCustomerArea: fn({ // 外勤客户端专用, 客户插件, 客户区域选择
|
521 | id: '5330457627710680963',
|
522 | name: '区域1',
|
523 | onSuccess: fn([{
|
524 | "id": "5330457627710680963",
|
525 | "name": "区域1"
|
526 | }])
|
527 | }),
|
528 | getDepartmentMore: fn({ // 外勤客户端专用, 部门插件, 部门多选
|
529 | selectedIds: '5330457627710680963,5330457627710680963',
|
530 | onSuccess: fn([{
|
531 | "id": "5330457627710680963",
|
532 | "name": "市场部"
|
533 | }])
|
534 | }),
|
535 | getDepartment: fn({ // 外勤客户端专用, 部门插件, 部门单选
|
536 | id: '5330457627710680963',
|
537 | name: '市场部',
|
538 | onSuccess: fn([{
|
539 | "id": "5330457627710680963",
|
540 | "name": "市场部"
|
541 | }])
|
542 | }),
|
543 | openWindow: fn( // 打开新窗口
|
544 | {
|
545 | url: string, // 打开的地址
|
546 | title: '', // 外勤客户端专用, 标题, 默认为空串
|
547 | },
|
548 | fn() // 外勤客户端专用, 打开回调
|
549 | ),
|
550 | closeWindow: fn( // 关闭窗口, 客户端关闭窗口, 浏览器和微信go(-1)
|
551 | fn() // 订货客户端专用, 关闭回调
|
552 | ),
|
553 | goHome: fn(
|
554 | fn() // 外勤客户端专用, 回到首页回调
|
555 | )
|
556 | isHomePage: fn(
|
557 | fn(true | false), // 是否是首页回调
|
558 | rule: '地址栏包含的字符串' // 用于判断是不是首页
|
559 | ),
|
560 | back: fn(), // 返回, 地址栏参数isFromApp: home(调用goHome) | confirm(对话框后go(-1)) | confirm-close(对话框后调用closeWindow) | 1(go(-1))
|
561 | addBackPress: fn(), // 绑定返回按键监听back方法
|
562 | removeBackPress: fn(), // 移除返回按键监听
|
563 | getLocation: fn({ // 定位, 默认为gcj02坐标
|
564 | onSuccess: fn({longitude:'118.730515', latitude:'31.982473', speed:'0.0', accuracy:'3.0.0'}),
|
565 | onError: fn({code:'locationFail', msg: '定位功能仅可在微信或APP中使用'})
|
566 | }),
|
567 | getAddress: fn({ // 地址逆解析
|
568 | latitude: '',
|
569 | longitude: '',
|
570 | onSuccess: fn('地址'),
|
571 | onError: fn({code: 'addressFail', msg: '获取位置名称失败,请稍后重试'})
|
572 | }),
|
573 | getDistance: fn({ // 获取两点间的距离,返回km
|
574 | point1: {longitude: '', latitude: ''},
|
575 | point2: {longitude: '', latitude: ''},
|
576 | onError: fn({code: 'distanceFail', msg: '传入的坐标不正确'})
|
577 | }),
|
578 | getWeather: fn({ // 获得天气
|
579 | location: 'lng,lat|lng,lat|lng,lat', // 可以用坐标或者地名, 如:'北京市|上海市', 用|隔开返回结果集
|
580 | onSuccess: fn([{
|
581 | currentCity: "北京市",
|
582 | index: [
|
583 | {
|
584 | des: "建议着长袖T恤、衬衫加单裤等服装。年老体弱者宜着针织长袖衬衫、马甲和长裤。",
|
585 | tipt: "穿衣指数",
|
586 | title: "穿衣",
|
587 | zs: "舒适"
|
588 | }
|
589 | ...
|
590 | ],
|
591 | pm25: "48",
|
592 | weather_data: [
|
593 | {
|
594 | date: "周二 09月25日 (实时:20℃)",
|
595 | dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
|
596 | nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
|
597 | temperature: "22 ~ 12℃",
|
598 | weather: "多云",
|
599 | wind: "南风3-4级"
|
600 | },{
|
601 | date: "周三",
|
602 | dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
|
603 | nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
|
604 | temperature: "24 ~ 14℃",
|
605 | weather: "多云",
|
606 | wind: "南风微风"
|
607 | }
|
608 | ]
|
609 | }]),
|
610 | onFail: fn({code: 'weatherFail', msg: '获取天气失败,请稍后重试'})
|
611 | }),
|
612 | scanQRCode: fn({
|
613 | needResult: 1, // 微信专用, 默认为1,0扫描结果由微信处理,1则直接返回扫描结果
|
614 | scanType: ['qrCode', 'barCode'], // 微信专用, 扫码类型
|
615 | onSuccess: fn({resultStr: ''}),
|
616 | onError: fn({code: 'qrcodeFail', msg: '扫码失败,请退出重试' + res})
|
617 | }),
|
618 | logOut: fn(), // 外勤和订货客户端专用, 退出到登录页面
|
619 | Image: { // 照片选择上传
|
620 | onChooseSuccess: fn ({ // 选择完成, 出参为imgMap
|
621 | localId: {
|
622 | serverId: '',
|
623 | sourceType: 'camera | album',
|
624 | name: '', // 外勤客户端专用
|
625 | base64: '', // 外勤客户端专用
|
626 | src: '' //外勤客户端专用, 本地地址
|
627 | }
|
628 | }),
|
629 | onUploadSuccess:fn(imgMap,res) // 微信专用, 单张上传成功
|
630 | onUploadFail:fn(index, item) // 微信专用, 单张上传失败
|
631 | onUploadsSuccess:fn(imgMap) // 微信专用, 全部上传成功
|
632 | },
|
633 | logger: fn(el), // 打印日志, el监听触发的元素, 点击十次显示, 用DB.setSession('app_logger', '')设置日志
|
634 | tel: fn('13800000000'), // 打电话
|
635 | showToast: fn('消息内容', {
|
636 | mask: true, // true下层事件会被阻止,false则不阻止
|
637 | position: 'middle', // 弹框位置, top | middle | bottom
|
638 | icon: 'icon-xx', // 图标class名称
|
639 | delay: 2000, // 延时关闭
|
640 | onSuccess: fn() // 完成关闭时回调
|
641 | }),
|
642 | showLoading: fn({ // 弹出loading
|
643 | type: 'floating流光 | filling填料环 | custom自定义',
|
644 | css: '', // 设置mask的css
|
645 | icon: 'icon-xx', // 自定义loading时,图标class名称
|
646 | mask: true, // true下层事件会被阻止,false则不阻止
|
647 | }),
|
648 | hideLoading: fn() // 隐藏loading
|
649 | showAlert: fn('消息内容', {
|
650 | caption: '', // 标题, 默认为空串
|
651 | onSuccess: fn({hide: fn()}) // 点击确定时回调, 默认为隐藏弹出框
|
652 | }),
|
653 | showConfirm: fn('消息内容', {
|
654 | caption: '', // 标题, 默认为空串
|
655 | onSuccess: fn({hide: fn()}), // 点击确定时回调
|
656 | onError: fn() // 点击取消时回调, 默认为隐藏弹出框
|
657 | })
|
658 | }
|
659 | ```
|
660 | ### 示例
|
661 | ```javascript
|
662 | import Bridge from 'seedsui-react/lib/Bridge';
|
663 |
|
664 | Bridge.showToast('提交成功', {
|
665 | mask: true,
|
666 | onSuccess: () => {
|
667 | history.go(-1);
|
668 | }
|
669 | });
|
670 | ```
|
671 | [返回目录](#component)
|
672 |
|
673 |
|
674 |
|
675 |
|
676 | ## Button
|
677 | [按钮](https://unpkg.com/seedsui-react/src/lib/Button/Button.js)
|
678 | ### 属性
|
679 | ```javascript
|
680 | <Button
|
681 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
682 | style={按钮style object, 默认无}
|
683 | className={按钮className string, 默认无, 基础'button'} // 尺寸样式'sm | lg | xl'
|
684 | disabled={是否禁用 bool, 默认false}
|
685 | onClick={点击项 func(args)}
|
686 | {...others}
|
687 | >
|
688 | 按钮内容
|
689 | </Button>
|
690 | ```
|
691 | ### 示例
|
692 | ```javascript
|
693 | import Button from 'seedsui-react/lib/Button';
|
694 |
|
695 | <Button className="lg">提交</Button>
|
696 | ```
|
697 | [返回目录](#component)
|
698 |
|
699 |
|
700 |
|
701 |
|
702 | ## Calendar
|
703 | [日历](https://unpkg.com/seedsui-react/src/lib/Calendar/Calendar.js)
|
704 | ### 属性
|
705 | ```javascript
|
706 | <Calendar
|
707 | type={日历类型 string, 默认'month'} // week|month
|
708 | titleFormat={是否显示周数 string, 默认'YYYY年MM月DD日'} // 标题日期格式化 YYYY年MM月DD日 周E 第W周
|
709 | disableBeforeDate={禁用此前日期 date, 默认无}
|
710 | disableAfterDate={禁用此后日期 date, 默认无}
|
711 | verticalDrag={是否允许垂直拖动 bool, 默认true}
|
712 | defaultDate={默认选中日期 date, 默认new Date()}
|
713 | prevHTML={左箭头html string, 默认'<'}
|
714 | nextHTML={右箭头html string, 默认'>'}
|
715 | onChange={选中日期发生变化 func(date)}
|
716 | onClick={点击 func(date)}
|
717 | onError={非法操作,如选择禁用日期 func(date)}
|
718 | />
|
719 | ```
|
720 | ### 示例
|
721 | ```javascript
|
722 | import Calendar from 'seedsui-react/lib/Calendar';
|
723 |
|
724 | onChangeCalendar = (s) => {
|
725 | // 记录滑动后切换的日期
|
726 | console.log('滑动选中:' + s.activeDate.format('YYYY-MM-DD'))
|
727 | }
|
728 | onClickCalendar = (s) => {
|
729 | // 记录点击的选中日期, 用于滑动不切换日期用
|
730 | console.log('点击选中:' + s.selectedDate.format('YYYY-MM-DD'))
|
731 | }
|
732 | showMonth = () => {
|
733 | this.$calendar.instance.showMonth();
|
734 | }
|
735 | showWeek = () => {
|
736 | this.$calendar.instance.showWeek();
|
737 | }
|
738 | showToday = () => {
|
739 | this.$calendar.instance.setToday();
|
740 | }
|
741 | showReset = () => {
|
742 | this.$calendar.instance.setDefaultDate();
|
743 | }
|
744 |
|
745 | const defaultDate = new Date()
|
746 | defaultDate.nextMonth();
|
747 |
|
748 | <Calendar
|
749 | ref={el => {this.$calendar = el;}}
|
750 | type="week"
|
751 | titleFormat="YYYY年MM月DD日 周EE 第W周"
|
752 | disableBeforeDate={new Date()}
|
753 | onChange={this.onChangeCalendar}
|
754 | onClick={this.onClickCalendar}
|
755 | defaultDate={defaultDate}
|
756 | />
|
757 | <a style={{margin: '8px'}} className="button lg bg-1" onClick={this.showMonth}>月</a>
|
758 | <a style={{margin: '8px'}} className="button lg bg-2" onClick={this.showWeek}>周</a>
|
759 | <a style={{margin: '8px'}} className="button lg bg-3" onClick={this.showToday}>今天</a>
|
760 | <a style={{margin: '8px'}} className="button lg bg-4" onClick={this.showReset}>重置</a>
|
761 | ```
|
762 | [返回目录](#component)
|
763 |
|
764 |
|
765 |
|
766 |
|
767 | ## Card
|
768 | [卡片](https://unpkg.com/seedsui-react/src/lib/Card/Card.js)
|
769 | ### 属性
|
770 | ```javascript
|
771 | <Card
|
772 | style={卡片style object, 默认无}
|
773 | className={卡片className string, 默认无, 基础'card'}
|
774 | onClick={点击项 func(args)}
|
775 | {...others}
|
776 | >
|
777 | 卡片内容
|
778 | </Card>
|
779 | ```
|
780 | ### 示例
|
781 | ```javascript
|
782 | import Card from 'seedsui-react/lib/Card';
|
783 |
|
784 | <Card>
|
785 | 卡片内容
|
786 | </Card>
|
787 | ```
|
788 | [返回目录](#component)
|
789 |
|
790 |
|
791 |
|
792 |
|
793 | ## Carrousel
|
794 | [轮播](https://unpkg.com/seedsui-react/src/lib/Carrousel/Carrousel.js)
|
795 | ### 属性
|
796 | ```javascript
|
797 | <Carrousel
|
798 | style={容器style object, 默认无}
|
799 | className={容器className string, 默认无, 基础:list模式下为'carrousel-container'|page模式下为'carrousel-page'}
|
800 |
|
801 | slideParams={div左线条属性 object, 默认无, 基础{className: 'carrousel-slide'}}
|
802 |
|
803 | pagination={是否显示小点点 bool | node, 默认false} // 传node为自定义分页
|
804 | paginationParams={div小点点容器属性 object, 默认无, 基础{className: 'carrousel-pagination'}}
|
805 |
|
806 | stopPropagation={是否阻止点击事件的传播 bool, 默认false} // 当touch事件与FastClick插件冲突时可设为false
|
807 | loop={是否循环显示 bool, 默认false}
|
808 | activeIndex={默认选中第几块 number, 默认0}
|
809 |
|
810 | autoplay={自动播放毫秒数 number, 默认0} // 设置大于0的数值才会触发自动播放
|
811 | slidesPerView={一屏显示几块 number, 默认1}
|
812 | defaultSrc={默认图片 string, 默认'//res.waiqin365.com/d/seedsui/carrousel/default.png'}
|
813 | list={轮播图 array, 默认无} // 格式: [{bg: 'xx', img: 'xx', iconParams: {}, caption: 'xx'}]
|
814 | speed={动画过渡的速度 number, 默认300}
|
815 | enableOnChange={手动调用slideTo方法是否触发onChange事件回调 bool, 默认true}
|
816 | onChange={轮播时事件回调 func()}
|
817 | onClick={点击块 func(item, index, s, e)}
|
818 |
|
819 | children={wrapper容器内子元素 node, 默认无}
|
820 |
|
821 | {...others}
|
822 | >
|
823 | <div>轮播页时, 用此div, 轮播图则使用list属性</div>
|
824 | </Carrousel>
|
825 | ```
|
826 | ### 示例
|
827 | ```javascript
|
828 | import Calendar from 'seedsui-react/lib/Calendar';
|
829 | // 轮播页
|
830 | onCarrouselChange = (e) => {
|
831 | this.props.changeActiveTab(e.activeIndex);
|
832 | if (e.activeIndex === 1) { // 加载第二页内容
|
833 | if (!this.sndLoaded) {
|
834 | this.loadSnd(false);
|
835 | this.sndLoaded = true;
|
836 | }
|
837 | }
|
838 | }
|
839 | <Carrousel style={{top: '84px'}} onChange={this.onCarrouselChange} activeIndex={this.props.tabActiveIndex}>
|
840 | <Page>第一页</Page>
|
841 | <Page>第二页</Page>
|
842 | </Carrousel>
|
843 | // 轮播图
|
844 | <Carrousel list={imgsList} style={{height: document.getElementById('root').clientWidth + 'px'}} pagination loop/>
|
845 | ```
|
846 | [返回目录](#component)
|
847 |
|
848 |
|
849 |
|
850 |
|
851 | ## Chat
|
852 | [聊天框](https://unpkg.com/seedsui-react/src/lib/Chat/Chat.js)
|
853 | ### 属性
|
854 | ```javascript
|
855 | <Chat
|
856 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
857 | style={容器style object, 默认无}
|
858 | className={容器className string, 默认无, 基础'chat'}
|
859 | onClick={点击聊天框 func()}
|
860 |
|
861 | showAvatar={是否显示照片 bool, 默认false}
|
862 | avatarClassName={照片className string, 默认'chat-avatar'}
|
863 | avatarStyle={照片style object, 默认无}
|
864 | avatarSrc={照片src string, 默认无}
|
865 | avatarAfter={照片后元素 node, 默认无}
|
866 | onClickAvatar={点击照片 func()}
|
867 |
|
868 | author={用户名称 string, 默认无}
|
869 | authorClassName={用户名称className string, 默认无, 基础'chat-author'}
|
870 | authorStyle={用户名称style object, 默认无}
|
871 |
|
872 | contentClassName={内容className string, 默认无, 基础'chat-content'}
|
873 | contentStyle={内容style object, 默认无}
|
874 | onClickContent={点击内容 func()}
|
875 | >
|
876 | 内容
|
877 | </Chat>
|
878 | ```
|
879 | ### 示例
|
880 | ```javascript
|
881 | import Chat from 'seedsui-react/lib/Chat';
|
882 |
|
883 | <Chat>
|
884 | 内容
|
885 | </Chat>
|
886 | ```
|
887 | [返回目录](#component)
|
888 |
|
889 |
|
890 |
|
891 |
|
892 | ## Checkbox
|
893 | [复选框](https://unpkg.com/seedsui-react/src/lib/Checkbox/Checkbox.js)
|
894 | ### 属性
|
895 | ```javascript
|
896 | <Checkbox
|
897 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
898 | style={容器style object, 默认无}
|
899 | className={容器className string, 默认无, 基础'checkbox-box'}
|
900 | onClick={点击复选框 func(checked, args)}
|
901 |
|
902 | name={复选框name string, 默认无}
|
903 | value={复选框value string, 默认无}
|
904 | checked={是否选中 bool, 默认false}
|
905 | disabled={是否禁用 bool, 默认false}
|
906 |
|
907 | caption={复选框标题 string, 默认无}
|
908 | captionClassName={复选框标题className string, 默认无, 基础'checkbox-caption'}
|
909 | captionStyle={复选框标题style object, 默认无}
|
910 | />
|
911 | ```
|
912 | ### 示例
|
913 | ```javascript
|
914 | import Checkbox from 'seedsui-react/lib/Checkbox';
|
915 |
|
916 | onClick = (checked) => {
|
917 | this.props.checkChange(!checked)
|
918 | }
|
919 |
|
920 | const {checked} = this.props;
|
921 | <Checkbox caption="全选" checked={checked} onClick={this.onClick}/>
|
922 | ```
|
923 | [返回目录](#component)
|
924 |
|
925 |
|
926 |
|
927 |
|
928 |
|
929 |
|
930 |
|
931 | ## Container
|
932 | [主体内容](https://unpkg.com/seedsui-react/src/lib/Container/Container.js)
|
933 | , 通常与Page、Header一起使用, 位于Header下面的位置
|
934 | ### 属性
|
935 | ```javascript
|
936 | <Container
|
937 | style={容器style object, 默认无}
|
938 | className={容器className string, 默认无, 基础'container'}
|
939 | lazyLoad={是否启用懒人加载 bool, 默认false} // 只会在didMount时执行lazyLoadInstance.load();
|
940 | // 异步加载时需要使用:
|
941 | // ref="$container" 和 ref={(el) => {this.$container = el;}}, this.refs.$container === this.$container
|
942 | // this.refs.$container.state.lazyLoadInstance.load();或this.$container.state.lazyLoadInstance.load();
|
943 |
|
944 | {...others}
|
945 | >
|
946 | 主体内容
|
947 | </Container>
|
948 | ```
|
949 | ### 示例
|
950 | ```javascript
|
951 | import Page from 'seedsui-react/lib/Page';
|
952 | import Header from 'seedsui-react/lib/Header';
|
953 | import Container from 'seedsui-react/lib/Container';
|
954 |
|
955 | <Page>
|
956 | <Header>
|
957 | 头部
|
958 | </Header>
|
959 | <Container>
|
960 | 中部
|
961 | </Container>
|
962 | </Page>
|
963 | ```
|
964 | [返回目录](#component)
|
965 |
|
966 |
|
967 |
|
968 |
|
969 | ## Counter
|
970 | [计数器](https://unpkg.com/seedsui-react/src/lib/Counter/Counter.js)
|
971 | ### 属性
|
972 | ```javascript
|
973 | <Counter
|
974 | style={容器style object, 默认无}
|
975 | className={容器className string, 默认无, 基础'container'}
|
976 | duration={动画时长 number, 默认5000}
|
977 | from={开始数字 number, 默认0}
|
978 | to={结束数字 number, 默认10}
|
979 | suffix={数字不变的后缀 string, 默认无} // 如设置为/10, 则显示为0/10
|
980 | autoplay={是否自动播放 bool, 默认true}
|
981 | {...others}
|
982 | />
|
983 | ```
|
984 | ### ref方法
|
985 | ```javascript
|
986 | play() // 播放
|
987 | ```
|
988 | ### 示例
|
989 | ```javascript
|
990 | import Counter from 'seedsui-react/lib/Counter';
|
991 |
|
992 | onClick = () => {
|
993 | this.refs.$counter.play();
|
994 | }
|
995 |
|
996 | <Counter to={500} autoplay={false} ref="$counter"/>
|
997 | ```
|
998 | [返回目录](#component)
|
999 |
|
1000 |
|
1001 |
|
1002 |
|
1003 | ## Dialog
|
1004 | [弹出框](https://unpkg.com/seedsui-react/src/lib/Dialog/Dialog.js)
|
1005 | ### 属性
|
1006 | ```javascript
|
1007 | <Dialog
|
1008 | portal={传送dom object, 默认document.getElementById('root')}
|
1009 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
1010 | show={*显隐 bool, 默认false}
|
1011 |
|
1012 | animation={动画 string, 默认'fade'} // slideLeft | slideRight | slideUp | slideDown | zoom | fade
|
1013 | duration={动画时长 number, 默认见seedsui-variable.less}
|
1014 | isClickMaskHide={是否点击遮罩隐藏 bool, 默认true}
|
1015 | onClickMask={点击遮罩 func(s)}
|
1016 | onShowed={显示完成 func(s)}
|
1017 | onHid={隐藏完成 func(s)}
|
1018 |
|
1019 | maskClassName={遮罩className string, 默认无, 基础'mask dialog-mask'}
|
1020 | maskStyle={遮罩style object, 默认无}
|
1021 |
|
1022 | className={容器className string, 默认无, 基础'container'}
|
1023 | style={容器style object, 默认无}
|
1024 | {...others}
|
1025 | >
|
1026 | </Dialog>
|
1027 | ```
|
1028 | ### 示例
|
1029 | ```javascript
|
1030 | import Dialog from 'seedsui-react/lib/Dialog';
|
1031 |
|
1032 | <Dialog show={this.state.showDialog} animation="zoom" duration={200} style={{width: '80%', height: '80%', backgroundColor: 'white', borderRadius: '10px'}}>
|
1033 | 弹出框内容
|
1034 | </Dialog>
|
1035 | ```
|
1036 | [返回目录](#component)
|
1037 |
|
1038 |
|
1039 |
|
1040 |
|
1041 | ## Dot
|
1042 | [小圆点](https://unpkg.com/seedsui-react/src/lib/Dot/Dot.js)
|
1043 | ### 属性
|
1044 | ```javascript
|
1045 | <Dot
|
1046 | style={图标style object, 默认无}
|
1047 | className={图标className string, 默认无, 基础'dot'}
|
1048 | size={宽高大小px number, 默认无}
|
1049 | {...others}
|
1050 | />
|
1051 | ```
|
1052 | ### 示例
|
1053 | ```javascript
|
1054 | import Dot from 'seedsui-react/lib/Dot';
|
1055 |
|
1056 | <Dot size={8}/>
|
1057 | ```
|
1058 | [返回目录](#component)
|
1059 |
|
1060 |
|
1061 |
|
1062 |
|
1063 | ## Dragrefresh
|
1064 | [下拉刷新](https://unpkg.com/seedsui-react/src/lib/Dragrefresh/Dragrefresh.js)
|
1065 | ### 属性
|
1066 | ```javascript
|
1067 | <Dragrefresh
|
1068 | style={容器style object, 默认无}
|
1069 | className={容器className string, 默认无, 基础'dot'}
|
1070 |
|
1071 | threshold={头部下拉的触发位置 number, 默认50}
|
1072 | end={头部下拉的结束位置 number, 默认200}
|
1073 | endRefresh={滑动到底后刷新 bool, 默认false}
|
1074 | moveTimeout={滑动超时,解决ios手指滑动到原生tabbar上,不触发onTouchEnd number, 默认0}
|
1075 | onTopRefresh={头部刷新 func(s)}
|
1076 | onTopComplete={头部刷新完成 func(s)}
|
1077 | onBottomRefresh={底部刷新 func(s)}
|
1078 | onBottomComplete={底部刷新完成 func(s)}
|
1079 |
|
1080 | hasMore={状态标识 number, 默认-2} // 1刷新完成 | 0没有更多数据 | -1网络错误 | 404找不到数据 | -2空闲但展现底部转圈
|
1081 |
|
1082 | showNoData={是否允许暂无数据 bool, 默认false}
|
1083 | noDataParams={无数据时的Notive组件属性 object, 默认无}
|
1084 |
|
1085 | lazyLoad={是否启用懒人加载 bool, 默认false} // 每当didUpdate时会执行lazyLoadInstance.load();
|
1086 |
|
1087 | onScroll={滚动事件 func(e)}
|
1088 |
|
1089 | bottomLoadingCaption={底部加载中 string, 默认'正在加载...'}
|
1090 | bottomNoDataCaption={底部加载完成 string, 默认'没有更多数据了'}
|
1091 | bottomErrorCaption={底部加载错误 string, 默认'加载失败, 请稍后再试'}
|
1092 | onClickBottomError={点击底部加载错误区域 func, 默认无}
|
1093 | >
|
1094 | 内容
|
1095 | </Dragrefresh>
|
1096 | ```
|
1097 | ### 示例
|
1098 | ```javascript
|
1099 | import Dragrefresh from 'seedsui-react/lib/Dragrefresh';
|
1100 |
|
1101 | this.state = {
|
1102 | hasMore: -2, // hasMore: 0.无更多数据 1.数据加载完成 404.一条数据都没有, -1. 加载错误, -2. 重置状态,为了后面可以更新DOM
|
1103 | list: []
|
1104 | }
|
1105 | componentDidMount () {
|
1106 | this.loadData();
|
1107 | }
|
1108 |
|
1109 | // 下拉刷新配置
|
1110 | onTopRefresh = () => {
|
1111 | console.log('头部刷新');
|
1112 | this.loadData(false);
|
1113 | }
|
1114 | onBottomRefresh = () => {
|
1115 | console.log('底部刷新');
|
1116 | this.loadData(true);
|
1117 | }
|
1118 | loadData = () => {
|
1119 | let list = this.state.list;
|
1120 | let hasMore = -2; // hasMore: 0.无更多数据 1.数据加载完成 404.一条数据都没有, -1. 加载错误, -2. 重置状态,为了后面可以更新DOM
|
1121 | this.setState({
|
1122 | hasMore: -2 // 先重置状态, 后面再会触发react更新
|
1123 | });
|
1124 | setTimeout(() => {
|
1125 | let serList = [];
|
1126 | for (let i = 1; i <= 20; i++) {
|
1127 | serList.push(i);
|
1128 | }
|
1129 | // 拼接数据
|
1130 | list = list.concat(serList);
|
1131 | hasMore = 1;
|
1132 | // 如果数据大于100, 则完成加载
|
1133 | if (list.length >= 100) {
|
1134 | hasMore = 0;
|
1135 | }
|
1136 | // 更新DOM
|
1137 | this.setState({
|
1138 | list,
|
1139 | hasMore
|
1140 | });
|
1141 | }, 1000);
|
1142 | }
|
1143 |
|
1144 | <Dragrefresh
|
1145 | moveTimeout={1000}
|
1146 | endRefresh
|
1147 | ref={(el) => {this.$elDrag = el;}}
|
1148 | hasMore={this.state.hasMore}
|
1149 | onTopRefresh={this.onTopRefresh}
|
1150 | onBottomRefresh={this.onBottomRefresh}
|
1151 | bottomErrorCaption="加载失败, 点击重新加载"
|
1152 | onClickBottomError={this.onBottomRefresh}
|
1153 | noDataParams={{onClick: this.onTopRefresh, caption: '暂无数据, 点击重新加载'}}
|
1154 | >
|
1155 | {this.state.list.map((item, index) => {
|
1156 | return <div className="flex flex-middle" style={{height: '44px'}} key={index}>{item}</div>
|
1157 | })}
|
1158 | </Dragrefresh>
|
1159 | ```
|
1160 | [返回目录](#component)
|
1161 |
|
1162 |
|
1163 |
|
1164 |
|
1165 | ## Dropdown
|
1166 | [下拉菜单](https://unpkg.com/seedsui-react/src/lib/Dropdown/Dropdown.js)
|
1167 | ### 属性
|
1168 | ```javascript
|
1169 | <Dropdown
|
1170 | portal={弹出框传送至dom object, 默认document.getElementById('root')}
|
1171 | top={头部距离 number, 默认0}
|
1172 | disabled={是否禁用 bool, 默认false}
|
1173 | onChange={选中菜单发生变化 func([{id: '', caption: ''}])}
|
1174 | list={菜单 array, 默认无} // 格式:[{id: '', name: '分类', data: [{id: '1',name: '测试数据1',children:[]}]}]
|
1175 | />
|
1176 | ```
|
1177 | ### 示例
|
1178 | ```javascript
|
1179 | import Dropdown from 'seedsui-react/lib/Dropdown';
|
1180 |
|
1181 | this.state = {
|
1182 | items: [{"id":"","name":"分类","data":[{"id":"","name":"全部","children":[]},{"id":"7938034417512813758","name":"饮料","children":[{"id":"4622400720177680517","name":"碳酸饮料"},{"id":"5800049423243362222","name":"茶饮料"},{"id":"5789432343240798823","name":"功能饮料"},{"id":"6413548566139705252","name":"饮用水"},{"id":"6936207795217715766","name":"中草药饮料"},{"id":"8746408135758103957","name":"蛋白质饮料"},{"id":"7268945622944992066","name":"果味饮料"},{"id":"9138462844675316911","name":"咖啡"}]},{"id":"7746459719734369628","name":"零食","children":[{"id":"9134066222295231258","name":"蜜饯果干"},{"id":"5394487194098598325","name":"坚果炒货"},{"id":"9070533848545878912","name":"早餐面包"},{"id":"5240328190253910837","name":"糖巧果冻"}]}]},{"id":"","name":"品牌","data":[{"id":"","name":"全部"},{"id":"其他","name":"其他"},{"id":"美汁源","name":"美汁源"},{"id":"可口","name":"可口"},{"id":"宏宝莱","name":"宏宝莱"},{"id":"康师傅","name":"康师傅"},{"id":"百事","name":"百事"},{"id":"卫岗","name":"卫岗"},{"id":"蒙牛","name":"蒙牛"},{"id":"伊利","name":"伊利"},{"id":"三只松鼠","name":"三只松鼠"}]},{"id":"","name":"筛选","data":[{"id":"","name":"全部"},{"id":"new","name":"新品"},{"id":"importance","name":"重点"}]}]
|
1183 | };
|
1184 |
|
1185 | onChangeDropdown = (tabs) => {
|
1186 | var items = Object.clone(this.state.items);
|
1187 | tabs.forEach((item, index) => {
|
1188 | items[index].id = item.id;
|
1189 | items[index].name = item.name;
|
1190 | });
|
1191 | this.setState({
|
1192 | items: items
|
1193 | })
|
1194 | }
|
1195 |
|
1196 | <Header>
|
1197 | <Dropdown list={this.state.items} onChange={this.onChangeDropdown}/>
|
1198 | </Header>
|
1199 | ```
|
1200 | [返回目录](#component)
|
1201 |
|
1202 |
|
1203 |
|
1204 |
|
1205 | ## Emoji
|
1206 | [表情弹出输入框](https://unpkg.com/seedsui-react/src/lib/Emoji/Emoji.js)
|
1207 | ### 属性
|
1208 | ```javascript
|
1209 | <Emoji
|
1210 | portal={弹出框传送至dom object, 默认document.getElementById('root')}
|
1211 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
1212 | autoFocus={自动获取焦点 bool, 默认false}
|
1213 |
|
1214 | value={值 string, 默认''}
|
1215 | placeholder={占位文字 string, 默认''}
|
1216 |
|
1217 | isClickMaskHide={是否点击遮罩隐藏 bool, 默认true}
|
1218 | onClickMask={点击遮罩 func(s)}
|
1219 |
|
1220 | maskStyle={遮罩style object, 默认无}
|
1221 | maskClassName={遮罩className string, 默认无, 基础'mask emoji-mask'}
|
1222 |
|
1223 | style={容器style object, 默认无}
|
1224 | className={容器className string, 默认无, 基础'emoji'}
|
1225 |
|
1226 | icon={图标dom node, 默认无}
|
1227 |
|
1228 | onChange={值变化 func(value, args)}
|
1229 | onSubmit={提交 func(value, args)}
|
1230 | />
|
1231 | ```
|
1232 | ### 示例
|
1233 | ```javascript
|
1234 | import Emoji from 'seedsui-react/lib/Emoji';
|
1235 |
|
1236 | this.state = {
|
1237 | showEmoji: false,
|
1238 | value: ''
|
1239 | }
|
1240 |
|
1241 | onChange = (value) => {
|
1242 | this.setState({
|
1243 | value: value
|
1244 | })
|
1245 | }
|
1246 |
|
1247 | toggleEmoji = () => {
|
1248 | this.setState((prevState) => {
|
1249 | return {
|
1250 | showEmoji: !prevState.showEmoji
|
1251 | }
|
1252 | })
|
1253 | }
|
1254 |
|
1255 | <Emoji
|
1256 | autoFocus
|
1257 | show={this.state.showEmoji}
|
1258 | onChange={this.onChange}
|
1259 | value={this.state.value}
|
1260 | onClickMask={this.toggleEmoji}
|
1261 | />
|
1262 | <input type="button" value="显隐" onClick={this.toggleEmoji}/>
|
1263 | ```
|
1264 | [返回目录](#component)
|
1265 |
|
1266 |
|
1267 |
|
1268 |
|
1269 | ## Footer
|
1270 | [底部内容](https://unpkg.com/seedsui-react/src/lib/Footer/Footer.js)
|
1271 | , 通常与Page、Header、Container一起使用
|
1272 | ### 属性
|
1273 | ```javascript
|
1274 | <Footer
|
1275 | style={容器style object, 默认无}
|
1276 | className={容器className string, 默认无, 基础'container'}
|
1277 | {...others}
|
1278 | >
|
1279 | 底部内容
|
1280 | </Footer>
|
1281 | ```
|
1282 | ### 示例
|
1283 | ```javascript
|
1284 | import Page from 'seedsui-react/lib/Page';
|
1285 | import Header from 'seedsui-react/lib/Header';
|
1286 | import Footer from 'seedsui-react/lib/Footer';
|
1287 | import Container from 'seedsui-react/lib/Container';
|
1288 |
|
1289 | <Page>
|
1290 | <Header>
|
1291 | 头部
|
1292 | </Header>
|
1293 | <Container>
|
1294 | 中部
|
1295 | </Container>
|
1296 | <Footer>
|
1297 | 底部
|
1298 | </Footer>
|
1299 | </Page>
|
1300 | ```
|
1301 | [返回目录](#component)
|
1302 |
|
1303 |
|
1304 |
|
1305 |
|
1306 |
|
1307 |
|
1308 |
|
1309 | ## Group
|
1310 | [分组](https://unpkg.com/seedsui-react/src/lib/Group/Group.js)
|
1311 | ### 属性
|
1312 | ```javascript
|
1313 | <Group
|
1314 | style={卡片style object, 默认无}
|
1315 | className={卡片className string, 默认'border-tb', 基础'group'}
|
1316 | onClick={点击 func(args)}
|
1317 | {...others}
|
1318 | >
|
1319 | 分组
|
1320 | </Group>
|
1321 | ```
|
1322 | ### 示例
|
1323 | ```javascript
|
1324 | import Group from 'seedsui-react/lib/Group';
|
1325 |
|
1326 | <Group>
|
1327 | 分组
|
1328 | </Group>
|
1329 | ```
|
1330 |
|
1331 |
|
1332 | ## Handsign
|
1333 | [签名](https://unpkg.com/seedsui-react/src/lib/Handsign/Handsign.js)
|
1334 | ### 属性
|
1335 | ```javascript
|
1336 | <Handsign
|
1337 | strokeStyle={签名颜色 string, 默认'#000'}
|
1338 | lineWidth={签名线粗px number, 默认3}
|
1339 | quality={存储时的图片质量 number, 默认0.92}
|
1340 | suffix={图片保存类型 string, 默认'image/png'}
|
1341 | width={宽度px number, 默认300} // 不能通过style设置宽度,否则canvas会错位
|
1342 | height={高度px number, 默认300} // 不能通过style设置高度,否则canvas会错位
|
1343 | style={签名面板style object, 默认无}
|
1344 | className={签名面板className string, 默认无}
|
1345 | />
|
1346 | ```
|
1347 | ### 示例
|
1348 | ```javascript
|
1349 | import Handsign from 'seedsui-react/lib/Handsign';
|
1350 |
|
1351 | save = () => {
|
1352 | if (this.$handsign.instance.blank()) {
|
1353 | console.log('空白');
|
1354 | return;
|
1355 | }
|
1356 | if (!this.$handsign.instance.isDrew) {
|
1357 | console.log('没有画过');
|
1358 | return;
|
1359 | }
|
1360 | const sign_pic = this.$handsign.instance.save();
|
1361 | console.log(sign_pic);
|
1362 | }
|
1363 | clear = () => {
|
1364 | this.$handsign.instance.clear()
|
1365 | }
|
1366 | drawBg = () => {
|
1367 | this.$handsign.instance.drawBackgroundColor('#ff8800')
|
1368 | }
|
1369 |
|
1370 | <Handsign ref={(el) => {this.$handsign = el;}} width={300} strokeStyle="#c72a1d" height={300}/>
|
1371 | <input type="button" value="绘制背景" onClick={this.drawBg}/>
|
1372 | <input type="button" value="保存" onClick={this.save}/>
|
1373 | <input type="button" value="清除" onClick={this.clear}/>
|
1374 | ```
|
1375 | [返回目录](#component)
|
1376 |
|
1377 |
|
1378 |
|
1379 |
|
1380 | ## Header
|
1381 | [头部内容](https://unpkg.com/seedsui-react/src/lib/Header/Header.js)
|
1382 | , 通常与Page、Container一起使用
|
1383 | ### 属性
|
1384 | ```javascript
|
1385 | <Header
|
1386 | style={容器style object, 默认无}
|
1387 | className={容器className string, 默认无, 基础'container'}
|
1388 | {...others}
|
1389 | >
|
1390 | 头部内容
|
1391 | </Header>
|
1392 | ```
|
1393 | ### 示例
|
1394 | ```javascript
|
1395 | import Page from 'seedsui-react/lib/Page';
|
1396 | import Header from 'seedsui-react/lib/Header';
|
1397 | import Footer from 'seedsui-react/lib/Footer';
|
1398 | import Container from 'seedsui-react/lib/Container';
|
1399 |
|
1400 | <Page>
|
1401 | <Header>
|
1402 | 头部
|
1403 | </Header>
|
1404 | <Container>
|
1405 | 中部
|
1406 | </Container>
|
1407 | <Footer>
|
1408 | 底部
|
1409 | </Footer>
|
1410 | </Page>
|
1411 | ```
|
1412 | [返回目录](#component)
|
1413 |
|
1414 |
|
1415 |
|
1416 |
|
1417 |
|
1418 |
|
1419 |
|
1420 |
|
1421 |
|
1422 | ## ImgMark
|
1423 | [签名](https://unpkg.com/seedsui-react/src/lib/ImgMark/ImgMark.js)
|
1424 | ### 属性
|
1425 | ```javascript
|
1426 | <ImgMark
|
1427 | // 数据源
|
1428 | src={图片地址或者base64 string, 默认无}
|
1429 | data={标注数据 array, 默认无}
|
1430 | // [
|
1431 | // {
|
1432 | // x1: 442,
|
1433 | // x2: 492,
|
1434 | // y1: 79,
|
1435 | // y2: 265,
|
1436 | // strokeStyle: 'red' // 可选
|
1437 | // }
|
1438 | // ]
|
1439 | // canvas样式
|
1440 | isDrawSrc={是否连同背景一起绘制到canvas上 bool, 默认true}
|
1441 | watermark={预览水印 string, 默认无}
|
1442 | strokeStyle={标注颜色 string, 默认'#00ff00'}
|
1443 | lineWidth={标注线粗px number, 默认3}
|
1444 | quality={存储时的图片质量 number, 默认0.92}
|
1445 | width={宽度px number, 默认无} // 宽度会根据调度等比例缩放,它只会影响canvas外层容器,并不会影响canvas
|
1446 | height={高度px number, 默认300} // 不能通过style设置高度,否则canvas会错位
|
1447 | style={标注面板style object, 默认无}
|
1448 | className={标注面板className string, 默认无}
|
1449 |
|
1450 | preview={是否预览 bool, 默认true}
|
1451 | />
|
1452 | ```
|
1453 | ### 示例
|
1454 | ```javascript
|
1455 | import ImgMark from 'seedsui-react/lib/ImgMark';
|
1456 |
|
1457 | const result = {
|
1458 | "skuList": [{
|
1459 | "x1": 442,
|
1460 | "x2": 492,
|
1461 | "y1": 79,
|
1462 | "y2": 265
|
1463 | }, {
|
1464 | "x1": 51,
|
1465 | "x2": 103,
|
1466 | "y1": 94,
|
1467 | "y2": 263
|
1468 | }, {
|
1469 | "x1": 221,
|
1470 | "x2": 269,
|
1471 | "y1": 774,
|
1472 | "y2": 948
|
1473 | }, {
|
1474 | "x1": 64,
|
1475 | "x2": 110,
|
1476 | "y1": 293,
|
1477 | "y2": 473
|
1478 | }, {
|
1479 | "x1": 598,
|
1480 | "x2": 643,
|
1481 | "y1": 283,
|
1482 | "y2": 468
|
1483 | }, {
|
1484 | "x1": 251,
|
1485 | "x2": 297,
|
1486 | "y1": 296,
|
1487 | "y2": 472
|
1488 | }, {
|
1489 | "x1": 266,
|
1490 | "x2": 312,
|
1491 | "y1": 89,
|
1492 | "y2": 265
|
1493 | }, {
|
1494 | "x1": 198,
|
1495 | "x2": 242,
|
1496 | "y1": 294,
|
1497 | "y2": 474
|
1498 | }, {
|
1499 | "x1": 311,
|
1500 | "x2": 355,
|
1501 | "y1": 84,
|
1502 | "y2": 265
|
1503 | }, {
|
1504 | "x1": 646,
|
1505 | "x2": 688,
|
1506 | "y1": 287,
|
1507 | "y2": 466
|
1508 | }, {
|
1509 | "x1": 155,
|
1510 | "x2": 196,
|
1511 | "y1": 295,
|
1512 | "y2": 473
|
1513 | }, {
|
1514 | "x1": 84,
|
1515 | "x2": 129,
|
1516 | "y1": 572,
|
1517 | "y2": 720
|
1518 | }, {
|
1519 | "x1": 431,
|
1520 | "x2": 475,
|
1521 | "y1": 575,
|
1522 | "y2": 721
|
1523 | }, {
|
1524 | "x1": 219,
|
1525 | "x2": 262,
|
1526 | "y1": 569,
|
1527 | "y2": 720
|
1528 | }, {
|
1529 | "x1": 131,
|
1530 | "x2": 174,
|
1531 | "y1": 573,
|
1532 | "y2": 721
|
1533 | }, {
|
1534 | "x1": 176,
|
1535 | "x2": 218,
|
1536 | "y1": 572,
|
1537 | "y2": 720
|
1538 | }, {
|
1539 | "x1": 137,
|
1540 | "x2": 180,
|
1541 | "y1": 810,
|
1542 | "y2": 947
|
1543 | }, {
|
1544 | "x1": 388,
|
1545 | "x2": 430,
|
1546 | "y1": 578,
|
1547 | "y2": 719
|
1548 | }, {
|
1549 | "x1": 587,
|
1550 | "x2": 627,
|
1551 | "y1": 808,
|
1552 | "y2": 948
|
1553 | }, {
|
1554 | "x1": 263,
|
1555 | "x2": 303,
|
1556 | "y1": 578,
|
1557 | "y2": 717
|
1558 | }, {
|
1559 | "x1": 355,
|
1560 | "x2": 401,
|
1561 | "y1": 144,
|
1562 | "y2": 261
|
1563 | }, {
|
1564 | "x1": 423,
|
1565 | "x2": 466,
|
1566 | "y1": 356,
|
1567 | "y2": 473
|
1568 | }, {
|
1569 | "x1": 382,
|
1570 | "x2": 422,
|
1571 | "y1": 355,
|
1572 | "y2": 471
|
1573 | }, {
|
1574 | "x1": 672,
|
1575 | "x2": 712,
|
1576 | "y1": 148,
|
1577 | "y2": 254
|
1578 | }, {
|
1579 | "x1": 552,
|
1580 | "x2": 596,
|
1581 | "y1": 389,
|
1582 | "y2": 466
|
1583 | }, {
|
1584 | "x1": 512,
|
1585 | "x2": 550,
|
1586 | "y1": 633,
|
1587 | "y2": 721
|
1588 | }, {
|
1589 | "x1": 589,
|
1590 | "x2": 627,
|
1591 | "y1": 633,
|
1592 | "y2": 719
|
1593 | }, {
|
1594 | "x1": 472,
|
1595 | "x2": 507,
|
1596 | "y1": 865,
|
1597 | "y2": 956
|
1598 | }, {
|
1599 | "x1": 468,
|
1600 | "x2": 510,
|
1601 | "y1": 389,
|
1602 | "y2": 467
|
1603 | }, {
|
1604 | "x1": 553,
|
1605 | "x2": 587,
|
1606 | "y1": 632,
|
1607 | "y2": 720
|
1608 | }, {
|
1609 | "x1": 544,
|
1610 | "x2": 585,
|
1611 | "y1": 810,
|
1612 | "y2": 949
|
1613 | }, {
|
1614 | "x1": 217,
|
1615 | "x2": 266,
|
1616 | "y1": 86,
|
1617 | "y2": 271
|
1618 | }, {
|
1619 | "x1": 580,
|
1620 | "x2": 625,
|
1621 | "y1": 172,
|
1622 | "y2": 255
|
1623 | }, {
|
1624 | "x1": 403,
|
1625 | "x2": 440,
|
1626 | "y1": 175,
|
1627 | "y2": 259
|
1628 | }, {
|
1629 | "x1": 510,
|
1630 | "x2": 551,
|
1631 | "y1": 391,
|
1632 | "y2": 465
|
1633 | }, {
|
1634 | "x1": 324,
|
1635 | "x2": 380,
|
1636 | "y1": 289,
|
1637 | "y2": 471
|
1638 | }, {
|
1639 | "x1": 348,
|
1640 | "x2": 388,
|
1641 | "y1": 576,
|
1642 | "y2": 721
|
1643 | }, {
|
1644 | "x1": 507,
|
1645 | "x2": 543,
|
1646 | "y1": 860,
|
1647 | "y2": 950
|
1648 | }, {
|
1649 | "x1": 628,
|
1650 | "x2": 666,
|
1651 | "y1": 630,
|
1652 | "y2": 720
|
1653 | }, {
|
1654 | "x1": 305,
|
1655 | "x2": 346,
|
1656 | "y1": 581,
|
1657 | "y2": 720
|
1658 | }, {
|
1659 | "x1": 127,
|
1660 | "x2": 195,
|
1661 | "y1": 76,
|
1662 | "y2": 263
|
1663 | }, {
|
1664 | "x1": 628,
|
1665 | "x2": 669,
|
1666 | "y1": 171,
|
1667 | "y2": 255
|
1668 | }, {
|
1669 | "x1": 98,
|
1670 | "x2": 135,
|
1671 | "y1": 847,
|
1672 | "y2": 946
|
1673 | }, {
|
1674 | "x1": 182,
|
1675 | "x2": 217,
|
1676 | "y1": 837,
|
1677 | "y2": 943
|
1678 | }, {
|
1679 | "x1": 538,
|
1680 | "x2": 578,
|
1681 | "y1": 177,
|
1682 | "y2": 258
|
1683 | }, {
|
1684 | "x1": 493,
|
1685 | "x2": 536,
|
1686 | "y1": 173,
|
1687 | "y2": 259
|
1688 | }, {
|
1689 | "x1": 212,
|
1690 | "x2": 255,
|
1691 | "y1": 1112,
|
1692 | "y2": 1205
|
1693 | }, {
|
1694 | "x1": 294,
|
1695 | "x2": 351,
|
1696 | "y1": 764,
|
1697 | "y2": 939
|
1698 | }]
|
1699 | };
|
1700 |
|
1701 | const result1 = {
|
1702 | "skuList": [{
|
1703 | "x1": 442,
|
1704 | "x2": 492,
|
1705 | "y1": 79,
|
1706 | "y2": 265
|
1707 | }, {
|
1708 | "x1": 51,
|
1709 | "x2": 103,
|
1710 | "y1": 94,
|
1711 | "y2": 263
|
1712 | }]
|
1713 | };
|
1714 |
|
1715 | const result2 = {
|
1716 | "skuList": [{
|
1717 | "x1": 493,
|
1718 | "x2": 536,
|
1719 | "y1": 173,
|
1720 | "y2": 259
|
1721 | }, {
|
1722 | "x1": 212,
|
1723 | "x2": 255,
|
1724 | "y1": 1112,
|
1725 | "y2": 1205
|
1726 | }, {
|
1727 | "x1": 294,
|
1728 | "x2": 351,
|
1729 | "y1": 764,
|
1730 | "y2": 939
|
1731 | }]
|
1732 | };
|
1733 |
|
1734 | this.state = {
|
1735 | data: []
|
1736 | };
|
1737 |
|
1738 | onChangeData = () => {
|
1739 | this.setState({
|
1740 | data: result.skuList
|
1741 | })
|
1742 | }
|
1743 | onChangeData1 = () => {
|
1744 | this.setState({
|
1745 | data: result1.skuList
|
1746 | })
|
1747 | }
|
1748 | onChangeData2 = () => {
|
1749 | this.setState({
|
1750 | data: result2.skuList
|
1751 | })
|
1752 | }
|
1753 |
|
1754 | <ImgMark
|
1755 | watermark="//res.waiqin365.com/d/common_mobile/images/placeholder/watermark.png"
|
1756 | height={300}
|
1757 | src="http://image-test.waiqin365.com/6692513571099135446/sku/201809/20180911195747712_05105130_CAMERA_21001006280.jpg" // 示例中,图片跨域请用cross插件解决
|
1758 | data={this.state.data}
|
1759 | />
|
1760 | <input type="button" value="全部" onClick={this.onChangeData}/>
|
1761 | <input type="button" value="切换1" onClick={this.onChangeData1}/>
|
1762 | <input type="button" value="切换2" onClick={this.onChangeData2}/>
|
1763 | ```
|
1764 | [返回目录](#component)
|
1765 |
|
1766 |
|
1767 |
|
1768 |
|
1769 |
|
1770 |
|
1771 |
|
1772 | ## ImgLazy
|
1773 | [懒人加载](https://unpkg.com/seedsui-react/src/lib/ImgLazy/ImgLazy.js)
|
1774 | , 主要为了解决图片过多, 造成网络阻塞的问题, 一般采用的是滚动加载, 并在页面加载完成后, 执行滚动加载方法load()
|
1775 | ### 对象实例
|
1776 | ```javascript
|
1777 | var imglazy = new ImgLazy({
|
1778 | overflowContainer: el, // 滚动区域, 滚动加载时需要用到, 默认document.body
|
1779 | load: 'scroll', // scroll 滚动加载 | queue 队列加载 | all 全部加载
|
1780 | threshold: 300, // 滚动加载时, 上下扩展px加载
|
1781 | loadAttr: 'data-load-src', // 加载地址
|
1782 | errorAttr: 'data-error-src', // 错误地址
|
1783 | completeAttr: 'data-complete' // 完成加载, data-complete=0代表加载错误, =1代码加载正确
|
1784 | });
|
1785 | ```
|
1786 | ### 对象方法
|
1787 | ```javascript
|
1788 | load(); // 加载图片, load为scroll时加载可见区域, queue时队列加载完所有图片, all时加载所有图片
|
1789 | ```
|
1790 | ### 示例
|
1791 | ```javascript
|
1792 | import ImgLazy from 'seedsui-react/lib/ImgLazy';
|
1793 |
|
1794 | // 懒人加载
|
1795 | this.setState({
|
1796 | lazy: new ImgLazy({
|
1797 | overflowContainer: this.$elDrag.$el
|
1798 | })
|
1799 | });
|
1800 |
|
1801 | // 在页面加载完成的时候
|
1802 | this.state.lazy.load();
|
1803 | ```
|
1804 | [返回目录](#component)
|
1805 |
|
1806 |
|
1807 |
|
1808 |
|
1809 |
|
1810 |
|
1811 |
|
1812 |
|
1813 |
|
1814 |
|
1815 |
|
1816 | ## IndexBar
|
1817 | [索引栏](https://unpkg.com/seedsui-react/src/lib/IndexBar/IndexBar.js)
|
1818 | , IndexBar组件默认fixed定位, 并在父组件中寻找data-indexbar-name属性的元素, 与indexs对应, 滑动或点击切换时, 修改父组件的scrollTop, 以达到滚动的效果
|
1819 | ### 属性
|
1820 | ```javascript
|
1821 | <IndexBar
|
1822 | overflowContainer={滚动区域 any, 默认document.body}
|
1823 | parent={DOM注入容器 any, 默认document.body}
|
1824 | className={索引栏className string, 默认无, 基础'indexbar'}
|
1825 | style={索引栏style object, 默认无}
|
1826 | // indexs与父组件中所有data-indexbar-name元素对应即可
|
1827 | indexs={索引集合 array, 默认['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']}
|
1828 | />
|
1829 | ```
|
1830 | ### 示例
|
1831 | ```javascript
|
1832 | import Container from 'seedsui-react/lib/Container';
|
1833 | import IndexBar from 'seedsui-react/lib/IndexBar';
|
1834 | <Container>
|
1835 | <ul>
|
1836 | <li data-indexbar-name="A">A</li>
|
1837 | <li>阿华</li>
|
1838 | <li>阿敏</li>
|
1839 | <li>阿全</li>
|
1840 | <li>阿达</li>
|
1841 | <li data-indexbar-name="B">B</li>
|
1842 | <li>白起</li>
|
1843 | <li>白旭</li>
|
1844 | <li>冰冰</li>
|
1845 | <li data-indexbar-name="C">C</li>
|
1846 | <li>曹操</li>
|
1847 | <li>曹鸣</li>
|
1848 | <li>曹捷</li>
|
1849 | <li>陈真</li>
|
1850 | <li>陈进</li>
|
1851 | <li>陈明</li>
|
1852 | <li>陈伟</li>
|
1853 | <li>陈文</li>
|
1854 | <li>陈晓</li>
|
1855 | <li>陈娟</li>
|
1856 | <li>成勇</li>
|
1857 | <li>成婷</li>
|
1858 | <li>成龙</li>
|
1859 | <li data-indexbar-name="D">D</li>
|
1860 | <li>大成子</li>
|
1861 | <li>大舅子</li>
|
1862 | <li>戴笠</li>
|
1863 | <li>戴坤</li>
|
1864 | <li>戴成虎</li>
|
1865 | <li>邓小平</li>
|
1866 | <li>邓稼先</li>
|
1867 | <li>邓文迪</li>
|
1868 | <li>邓等</li>
|
1869 | <li>狄仁杰</li>
|
1870 | <li>狄弟</li>
|
1871 | <li>董文华</li>
|
1872 | <li>董事</li>
|
1873 | <li data-indexbar-name="F">F</li>
|
1874 | <li>樊哙</li>
|
1875 | <li>樊心</li>
|
1876 | <li>冯晨晨</li>
|
1877 | <li>冯敬尧</li>
|
1878 | <li>冯成虎</li>
|
1879 | <li>冯小平</li>
|
1880 | <li>冯稼先</li>
|
1881 | <li>冯文迪</li>
|
1882 | <li>冯晨</li>
|
1883 | <li>福尔杰</li>
|
1884 | <li>福尔康</li>
|
1885 | <li>福文华</li>
|
1886 | <li>方文山</li>
|
1887 | </ul>
|
1888 | <IndexBar style={{top: '44px'}}/>
|
1889 | </Container>
|
1890 | ```
|
1891 | [返回目录](#component)
|
1892 |
|
1893 |
|
1894 |
|
1895 |
|
1896 |
|
1897 |
|
1898 | ## IndexArea
|
1899 | [多行文本框](https://unpkg.com/seedsui-react/src/lib/IndexArea/IndexArea.js)
|
1900 | , 默认高度见seedsui-variable.less中@input-area-height, 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
1901 |
|
1902 |
|
1903 |
|
1904 |
|
1905 |
|
1906 |
|
1907 | ## InputCity
|
1908 | [城市选择框](https://unpkg.com/seedsui-react/src/lib/InputCity/InputCity.js)
|
1909 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致, 基于[PickerCity 城市选择弹框](#pickercity)组件
|
1910 | ### 属性
|
1911 | ```javascript
|
1912 | <InputCity
|
1913 | data={数据源 array, 默认内置数据源}
|
1914 | dataKeyPropertyName={data数据key的属性名称 string, 默认'key'}
|
1915 | dataValuePropertyName={data数据value的属性名称 string, 默认'value'}
|
1916 | dataChildPropertyName={data数据child的属性名称 string, 默认'children'}
|
1917 | // export default [
|
1918 | // {
|
1919 | // "value": "北京",
|
1920 | // "children": [
|
1921 | // {
|
1922 | // "value": "东城区",
|
1923 | // "key": "110101"
|
1924 | // }
|
1925 | // ]
|
1926 | // }
|
1927 | // ]
|
1928 | valueBindProp={值是否绑定props bool, 默认无} // 为true时只能通过props修改其value
|
1929 | valueForKeys={选中key array, 默认无}
|
1930 | split={分隔符 string, 默认'-'}
|
1931 | type={城市类型 string, 默认'area'} // 'area' | 'city'
|
1932 | onChange={值改变 func(value, option, args), 默认无}
|
1933 | // Picker
|
1934 | pickerMaskClassName={弹出框遮罩className string, 默认无}
|
1935 | pickerMaskStyle={弹出框遮罩style object, 默认无}
|
1936 | pickerClassName={弹出框className string, 默认无}
|
1937 | pickerStyle={弹出框style object, 默认无}
|
1938 | // 自定义Picker事件
|
1939 | pickerShow={控制picker的显隐 bool, 默认无}
|
1940 | onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
|
1941 | onClickCancel={点击picker取消按钮 func({target}), 默认无}
|
1942 | onClickMask={点击picker遮罩 func({target}), 默认无}
|
1943 | {...others}
|
1944 | />
|
1945 | ```
|
1946 | ### 示例
|
1947 | ```javascript
|
1948 | import InputCity from 'seedsui-react/lib/InputCity';
|
1949 |
|
1950 | this.state = {
|
1951 | value: ''
|
1952 | }
|
1953 |
|
1954 | onChange = (value) => {
|
1955 | this.setState({
|
1956 | value: value
|
1957 | });
|
1958 | }
|
1959 |
|
1960 | <InputCity
|
1961 | valueBindProp
|
1962 | value={this.state.value}
|
1963 | onChange={this.onChange}
|
1964 | placeholder="请选择"
|
1965 | className="border-b"
|
1966 | pickerMaskStyle={{zIndex: '11'}}
|
1967 | pickerMaskClassName="bg-white"
|
1968 | />
|
1969 | ```
|
1970 | [返回目录](#component)
|
1971 |
|
1972 |
|
1973 |
|
1974 | ## InputColor
|
1975 | [颜色选择框](https://unpkg.com/seedsui-react/src/lib/InputColor/InputColor.js)
|
1976 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
1977 |
|
1978 | ## InputDate
|
1979 | [日期选择框](https://unpkg.com/seedsui-react/src/lib/InputDate/InputDate.js)
|
1980 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致, 基于[PickerDate 日期选择弹框](#pickerdate)组件
|
1981 | ### 属性
|
1982 | ```javascript
|
1983 | <InputDate
|
1984 | valueForKey={选中key string, 默认无}
|
1985 | type={日期类型 string, 默认'date'} // 'date | month | time | datetime'
|
1986 | split={分隔符 string, 默认'-'}
|
1987 | onChange={值改变 func(value, option, args), 默认无}
|
1988 | onError={错误 func({msg: ''}), 默认无}
|
1989 | // Picker
|
1990 | pickerMaskClassName={弹出框遮罩className string, 默认无}
|
1991 | pickerMaskStyle={弹出框遮罩style object, 默认无}
|
1992 | pickerClassName={弹出框className string, 默认无}
|
1993 | pickerStyle={弹出框style object, 默认无}
|
1994 | // 自定义Picker事件
|
1995 | pickerShow={控制picker的显隐 bool, 默认无}
|
1996 | onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
|
1997 | onClickCancel={点击picker取消按钮 func({target}), 默认无}
|
1998 | onClickMask={点击picker遮罩 func({target}), 默认无}
|
1999 | {...others}
|
2000 | />
|
2001 | ```
|
2002 | ### 示例
|
2003 | ```javascript
|
2004 | import InputDate from 'seedsui-react/lib/InputDate';
|
2005 |
|
2006 | this.state = {
|
2007 | date: ''
|
2008 | }
|
2009 |
|
2010 | onChangeDate = (text) => {
|
2011 | this.setState({
|
2012 | date: text
|
2013 | });
|
2014 | }
|
2015 |
|
2016 | <InputDate
|
2017 | valueBindProp
|
2018 | min={new Date().format('yyyy-MM-dd')}
|
2019 | value={this.state.date}
|
2020 | onChange={this.onChangeDate}
|
2021 | placeholder="请选择"
|
2022 | className="border-b"
|
2023 | pickerMaskStyle={{zIndex: '11'}}
|
2024 | />
|
2025 | ```
|
2026 |
|
2027 |
|
2028 | ## InputLocation
|
2029 | [定位框](https://unpkg.com/seedsui-react/src/lib/InputLocation/InputLocation.js)
|
2030 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
2031 | ### 属性
|
2032 | ```javascript
|
2033 | <InputLocation
|
2034 | locationingText={定位中显示文字 string, 默认'定位中...'}
|
2035 | onClick={点击 func(value, args), 默认无}
|
2036 | onChange={值改变 func(value, args), 默认无}
|
2037 | {...others}
|
2038 | />
|
2039 | ```
|
2040 |
|
2041 |
|
2042 | ## InputNumber
|
2043 | [数字输入框](https://unpkg.com/seedsui-react/src/lib/InputNumber/InputNumber.js)
|
2044 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
2045 |
|
2046 | ## InputPassword
|
2047 | [密码输入框](https://unpkg.com/seedsui-react/src/lib/InputPassword/InputPassword.js)
|
2048 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
2049 |
|
2050 | ## InputPhone
|
2051 | [手机输入框](https://unpkg.com/seedsui-react/src/lib/InputPhone/InputPhone.js)
|
2052 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
2053 |
|
2054 |
|
2055 | ## InputPicker
|
2056 | [选择框](https://unpkg.com/seedsui-react/src/lib/InputPicker/InputPicker.js)
|
2057 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致, 基于[Picker 滚动选择弹框](#picker)组件
|
2058 | ### 属性
|
2059 | ```javascript
|
2060 | <InputPicker
|
2061 | valueForKey={选中key number | string, 默认无}
|
2062 | list={选择列表 array, 默认无}
|
2063 | onChange={值改变 func(value, option, args), 默认无}
|
2064 | // Picker
|
2065 | pickerMaskClassName={弹出框遮罩className string, 默认无}
|
2066 | pickerMaskStyle={弹出框遮罩style object, 默认无}
|
2067 | pickerClassName={弹出框className string, 默认无}
|
2068 | pickerStyle={弹出框style object, 默认无}
|
2069 | // 自定义Picker事件
|
2070 | pickerShow={控制picker的显隐 bool, 默认无}
|
2071 | onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
|
2072 | onClickCancel={点击picker取消按钮 func({target}), 默认无}
|
2073 | onClickMask={点击picker遮罩 func({target}), 默认无}
|
2074 | {...others}
|
2075 | />
|
2076 | ```
|
2077 | ### 示例
|
2078 | ```javascript
|
2079 | import InputPicker from 'seedsui-react/lib/InputPicker';
|
2080 |
|
2081 | this.state = {
|
2082 | value: '',
|
2083 | list: [
|
2084 | {
|
2085 | key: '1',
|
2086 | value: '111'
|
2087 | },
|
2088 | {
|
2089 | key: '2',
|
2090 | value: '222'
|
2091 | },
|
2092 | {
|
2093 | key: '3',
|
2094 | value: '333'
|
2095 | }
|
2096 | ]
|
2097 | }
|
2098 |
|
2099 | onChange = (value, option, args) => {
|
2100 | console.log(value, option, args);
|
2101 | this.setState({
|
2102 | value: value
|
2103 | });
|
2104 | }
|
2105 |
|
2106 | <InputPicker
|
2107 | list={this.state.list}
|
2108 | valueBindProp
|
2109 | value={this.state.value}
|
2110 | onChange={this.onChange}
|
2111 | placeholder="请选择"
|
2112 | className="border-b"
|
2113 | pickerMaskStyle={{zIndex: '11'}}
|
2114 | pickerMaskClassName="bg-white"
|
2115 | />
|
2116 | ```
|
2117 | [返回目录](#component)
|
2118 |
|
2119 |
|
2120 |
|
2121 | ## InputPre
|
2122 | [自增高输入框](https://unpkg.com/seedsui-react/src/lib/InputPre/InputPre.js)
|
2123 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致
|
2124 |
|
2125 |
|
2126 | ## InputRange
|
2127 | 范围选择框
|
2128 | ### 属性
|
2129 | ```javascript
|
2130 | <InputRange
|
2131 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
2132 | style={容器style object, 默认无}
|
2133 | className={容器className string, 默认无}
|
2134 | value={值 string | number, 默认'0'}
|
2135 | min={最小值 string | number, 默认'0'}
|
2136 | max={最小值 string | number, 默认'100'}
|
2137 | step={步进值 string | number, 默认'1'}
|
2138 | disabled={是否禁用 bool, 默认false}
|
2139 | onChange={值改变 func(value, args), 默认无}
|
2140 | />
|
2141 | ```
|
2142 | ### 示例
|
2143 | ```javascript
|
2144 | import InputRange from 'seedsui-react/lib/InputRange';
|
2145 |
|
2146 | onChangeRange = (value, args) => {
|
2147 | console.log(value, args);
|
2148 | }
|
2149 |
|
2150 | <InputRange onChange={this.onChangeRange}/>
|
2151 | ```
|
2152 | [返回目录](#component)
|
2153 |
|
2154 |
|
2155 |
|
2156 |
|
2157 | ## InputSafe
|
2158 | [安全强度检验框](https://unpkg.com/seedsui-react/src/lib/InputSafe/InputSafe.js)
|
2159 | , 展现三个状态: 弱、中、强
|
2160 | ### 属性
|
2161 | ```javascript
|
2162 | <InputSafe
|
2163 | style={容器style object, 默认无}
|
2164 | className={容器className string, 默认无}
|
2165 | value={值 string | number, 默认''}
|
2166 | />
|
2167 | ```
|
2168 | ### 示例
|
2169 | ```javascript
|
2170 | import InputSafe from 'seedsui-react/lib/InputSafe';
|
2171 |
|
2172 | <InputSafe value="Zk001"/>
|
2173 | ```
|
2174 |
|
2175 |
|
2176 | ## InputSelect
|
2177 | [选择框](https://unpkg.com/seedsui-react/src/lib/InputSelect/InputSelect.js)
|
2178 | , 其它属性用法与[InputText 文本框](#inputtext) 组件一致, 基于[SelectPicker 选择弹框](#selectpicker)组件
|
2179 | ### 属性
|
2180 | ```javascript
|
2181 | <InputSelect
|
2182 | valueForKey={选中key number | string, 默认无}
|
2183 | split={分隔符 string, 默认'-'}
|
2184 | multiple={是否允许多选 bool, 默认false}
|
2185 | list={选择列表 array, 默认无}
|
2186 | onChange={值改变 func(value, options, args), 默认无}
|
2187 | // Picker
|
2188 | pickerMaskClassName={弹出框遮罩className string, 默认无}
|
2189 | pickerMaskStyle={弹出框遮罩style object, 默认无}
|
2190 | pickerClassName={弹出框className string, 默认无}
|
2191 | pickerStyle={弹出框style object, 默认无}
|
2192 | // 自定义Picker事件
|
2193 | pickerShow={控制picker的显隐 bool, 默认无}
|
2194 | onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
|
2195 | onClickCancel={点击picker取消按钮 func({target}), 默认无}
|
2196 | onClickMask={点击picker遮罩 func({target}), 默认无}
|
2197 | {...others}
|
2198 | />
|
2199 | ```
|
2200 | ### 示例
|
2201 | ```javascript
|
2202 | import InputSelect from 'seedsui-react/lib/InputSelect';
|
2203 |
|
2204 | this.state = {
|
2205 | value: '',
|
2206 | list: [
|
2207 | {
|
2208 | key: '1',
|
2209 | value: '111'
|
2210 | },
|
2211 | {
|
2212 | key: '2',
|
2213 | value: '222'
|
2214 | },
|
2215 | {
|
2216 | key: '3',
|
2217 | value: '333'
|
2218 | }
|
2219 | ]
|
2220 | }
|
2221 |
|
2222 | onChange = (value, option, args) => {
|
2223 | console.log(value, option, args);
|
2224 | this.setState({
|
2225 | value: value
|
2226 | });
|
2227 | }
|
2228 |
|
2229 | <InputSelect
|
2230 | multiple
|
2231 | list={this.state.list}
|
2232 | valueBindProp
|
2233 | value={this.state.value}
|
2234 | onChange={this.onChange}
|
2235 | placeholder="请选择"
|
2236 | className="border-b"
|
2237 | pickerMaskStyle={{zIndex: '11'}}
|
2238 | pickerMaskClassName="bg-white"
|
2239 | />
|
2240 | ```
|
2241 | [返回目录](#component)
|
2242 |
|
2243 |
|
2244 |
|
2245 |
|
2246 |
|
2247 | ## InputStar
|
2248 | [评分框](https://unpkg.com/seedsui-react/src/lib/InputStar/InputStar.js)
|
2249 | ### 属性
|
2250 | ```javascript
|
2251 | <InputStar
|
2252 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
2253 | min={最小值 number, 默认0}
|
2254 | max={最大值 number, 默认5}
|
2255 | value={值 number, 默认0}
|
2256 | onChange={值改变 func(value), 默认无}
|
2257 | style={容器style object, 默认无}
|
2258 | className={容器className string, 默认无, 基础'input-star'}
|
2259 | />
|
2260 | ```
|
2261 | ### 示例
|
2262 | ```javascript
|
2263 | import InputStar from '../lib/InputStar';
|
2264 |
|
2265 | this.state = {
|
2266 | value: 0
|
2267 | }
|
2268 |
|
2269 | onChange = (value) => {
|
2270 | this.setState({
|
2271 | value
|
2272 | })
|
2273 | }
|
2274 |
|
2275 | <InputStar
|
2276 | min={2}
|
2277 | value={this.state.value}
|
2278 | onChange={this.onChange}
|
2279 | />
|
2280 | ```
|
2281 | [返回目录](#component)
|
2282 |
|
2283 |
|
2284 |
|
2285 |
|
2286 | ## InputText
|
2287 | [文本框](https://unpkg.com/seedsui-react/src/lib/InputText/InputText.js)
|
2288 | , 很多组件继承自此组件, 拥有此组件的属性, 如: InputPhone、InputPre、InputArea等
|
2289 | ### 属性
|
2290 | ```javascript
|
2291 | <InputText
|
2292 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
2293 | type={类型 string, 默认'text'} // text | password
|
2294 | valueBindProp={值是否绑定props bool, 默认无} // 为true时只能通过props修改其value
|
2295 | pre={是否启用自动扩充功能 bool, 默认无}
|
2296 | // 容器
|
2297 | style={容器style object, 默认无}
|
2298 | className={容器className string, 默认无, 基础'attribute'}
|
2299 | onClick={点击容器 func(value, args), 默认无}
|
2300 |
|
2301 | // 文本框
|
2302 | name={文本框name string, 默认无}
|
2303 | maxLength={文本框最大输入长度 string, 默认无}
|
2304 | max={文本框最大值 string | number, 默认无} // 日期或者数字框专用
|
2305 | min={文本框最小值 string | number, 默认无} // 日期或者数字框专用
|
2306 | digits={文本框截取小数 string | number, 默认false} // 日期或者数字框专用
|
2307 | readOnly={文本是否只读 bool, 默认无}
|
2308 | disabled={文本是否禁用 bool, 默认无}
|
2309 |
|
2310 | inputStyle={文本框style object, 默认无}
|
2311 | inputClassName={文本框className string, 默认无}
|
2312 | value={值 string | number, 默认''}
|
2313 | placeholder={占位符 string, 默认''}
|
2314 | onChange={值改变 func(value, args), 默认无}
|
2315 | onClickInput={点击文本框 func(value, args), 默认无}
|
2316 | onBlur={失去焦点 func(value, args), 默认无}
|
2317 | onFocus={获取焦点 func(value, args), 默认无}
|
2318 |
|
2319 | // 左右图标
|
2320 | licon={左图标 node, 默认无}
|
2321 | onClickLicon={点击左图标 func(args), 默认无}
|
2322 |
|
2323 | ricon={右图标 node, 默认无}
|
2324 | onClickRicon={点击右图标 func(args), 默认无}
|
2325 |
|
2326 | // 清除按钮
|
2327 | clear={清除 bool | func('', args), 默认无}
|
2328 | clearClassName={清除图标className string, 默认'ricon close-icon-clear size18'} // 见Close组件
|
2329 | clearStyle={清除图标style object, 默认无}
|
2330 |
|
2331 | // 右侧内容
|
2332 | rcaption={右侧内容 string, 默认无}
|
2333 | />
|
2334 | ```
|
2335 | ### 示例
|
2336 | ```javascript
|
2337 | import InputText from 'seedsui-react/lib/InputText';
|
2338 |
|
2339 | onChangeText = (value, args) => {
|
2340 | console.log(value, args);
|
2341 | }
|
2342 |
|
2343 | <InputText onChange={this.onChangeText}/>
|
2344 | ```
|
2345 |
|
2346 |
|
2347 |
|
2348 |
|
2349 |
|
2350 |
|
2351 |
|
2352 |
|
2353 |
|
2354 | ## Legend
|
2355 | [标题](https://unpkg.com/seedsui-react/src/lib/Legend/Legend.js)
|
2356 | ### 属性
|
2357 | ```javascript
|
2358 | <Legend
|
2359 | className={容器className string, 默认无, 基础'legend'}
|
2360 | >
|
2361 | 标题
|
2362 | </Legend>
|
2363 | ```
|
2364 | ### 示例
|
2365 | ```javascript
|
2366 | import Legend from 'seedsui-react/lib/Legend';
|
2367 |
|
2368 | <Legend>标题</Legend>
|
2369 | ```
|
2370 | [返回目录](#component)
|
2371 |
|
2372 |
|
2373 |
|
2374 | ## Jcrop
|
2375 | [标题](https://unpkg.com/seedsui-react/src/lib/Jcrop/Jcrop.js)
|
2376 | ### 属性
|
2377 | ```javascript
|
2378 | <Jcrop
|
2379 | src={图片地址 string, 默认无}
|
2380 | rect={选区方形坐标 array, 默认无} // [10,10,100,100]
|
2381 | scale={选区比例大小 array, 默认[.7,.5]} // [.7,.5]
|
2382 | options={初始化选项 obj, 默认{multi: false}}
|
2383 | onChange={选区变化事件 func({pos, src}), 默认无}
|
2384 | className={容器className string, 默认无, 基础'legend'}
|
2385 | {...others}
|
2386 | />
|
2387 | ```
|
2388 | ### 示例
|
2389 | ```javascript
|
2390 | import CanvasUtil from 'seedsui-react/lib/CanvasUtil';
|
2391 | import Jcrop from 'seedsui-react/lib/Jcrop';
|
2392 |
|
2393 | onChange = (e) => {
|
2394 | console.log(e)
|
2395 | this.setState({
|
2396 | pos: e.pos,
|
2397 | src: e.src
|
2398 | });
|
2399 | }
|
2400 |
|
2401 | onSubmit = () => {
|
2402 | CanvasUtil.cropImg({
|
2403 | src: this.state.src,
|
2404 | ...this.state.pos,
|
2405 | onSuccess: function (base64) {
|
2406 | console.log(base64)
|
2407 | }
|
2408 | });
|
2409 | }
|
2410 |
|
2411 | <Jcrop src={srcData} onChange={this.onChange} style={{width: '300px'}}/>
|
2412 | ```
|
2413 | [返回目录](#component)
|
2414 |
|
2415 |
|
2416 |
|
2417 |
|
2418 |
|
2419 |
|
2420 |
|
2421 | ## ListPull
|
2422 | [推送列表](https://unpkg.com/seedsui-react/src/lib/ListPull/ListPull.js)
|
2423 | ### 属性
|
2424 | ```javascript
|
2425 | <ListPull
|
2426 | list={列表 array, 默认无, 示例如下:}
|
2427 | // [{
|
2428 | // container: node,
|
2429 | // lButtons: [{value: '按钮文字', className: 'warn', style: object}],
|
2430 | // rButtons: 同lButtons
|
2431 | // }]
|
2432 | style={容器style object, 默认无}
|
2433 | className={容器className string, 默认无, 基础'list-pull'}
|
2434 | onClick={点击列表 func(item, index, btn), 默认无}
|
2435 | onShowedLeft={左侧显示 func(s), 默认无}
|
2436 | onShowedRight={右侧显示 func(s), 默认无}
|
2437 | />
|
2438 | ```
|
2439 | ### 示例
|
2440 | ```javascript
|
2441 | import ListPull from 'seedsui-react/lib/ListPull';
|
2442 |
|
2443 | this.state = {
|
2444 | listpull: [
|
2445 | {
|
2446 | container: <p style={{height: '50px'}}>内容</p>,
|
2447 | lButtons: [
|
2448 | {value: '未读', className: 'info', style: {padding: '0 12px'}}
|
2449 | ],
|
2450 | rButtons: [
|
2451 | {value: '收藏', className: 'warn', style: {padding: '0 12px'}},
|
2452 | {value: '删除', className: 'cancel', style: {padding: '0 12px'}}
|
2453 | ],
|
2454 | },
|
2455 | {
|
2456 | container: <p style={{height: '50px'}}>内容</p>,
|
2457 | lButtons: [
|
2458 | {value: '未读', className: 'info', style: {padding: '0 12px'}}
|
2459 | ],
|
2460 | rButtons: [
|
2461 | {value: '收藏', className: 'warn', style: {padding: '0 12px'}},
|
2462 | {value: '删除', className: 'cancel', style: {padding: '0 12px'}}
|
2463 | ],
|
2464 | }
|
2465 | ]
|
2466 | }
|
2467 |
|
2468 | onShowedLeft = (s) => {
|
2469 | var target = s.target.previousElementSibling.children[0];
|
2470 | if (target.innerHTML === '未读') {
|
2471 | target.classList.add('disabled');
|
2472 | target.innerHTML = '已读';
|
2473 | } else {
|
2474 | target.classList.remove('disabled');
|
2475 | target.innerHTML = '未读';
|
2476 | }
|
2477 | s.hide();
|
2478 | }
|
2479 |
|
2480 | onClickListPull = (item, index, btn) => {
|
2481 | console.log(item, index, btn)
|
2482 | }
|
2483 |
|
2484 | <ListPull list={this.state.listpull} onClick={this.onClickListPull} onShowedLeft={this.onShowedLeft}/>
|
2485 | ```
|
2486 | [返回目录](#component)
|
2487 |
|
2488 |
|
2489 |
|
2490 |
|
2491 |
|
2492 |
|
2493 |
|
2494 | ## Loading
|
2495 | [加载中](https://unpkg.com/seedsui-react/src/lib/Loading/Loading.js)
|
2496 | ### 属性
|
2497 | ```javascript
|
2498 | <Loading
|
2499 | portal={加载框传送至dom object, 默认无} // 不设置protal, 则不传送
|
2500 | type={加载框类型 string, 默认'floating'} // 'floating | filling | custom'
|
2501 |
|
2502 | maskStyle={遮罩style object, 默认无}
|
2503 | maskClassName={遮罩className object, 默认无}
|
2504 | maskBefore={遮罩第一层dom node, 默认无}
|
2505 |
|
2506 | style={加载框style object, 默认无}
|
2507 |
|
2508 | iconClassName={图标className string, 默认无, 基础'loading-custom-icon'}
|
2509 | iconSrc={图标地址 string, 默认无}
|
2510 | caption={标题 string, 默认'正在加载...'}
|
2511 | />
|
2512 | ```
|
2513 | ### 示例
|
2514 | ```javascript
|
2515 | import Loading from 'seedsui-react/lib/Loading';
|
2516 |
|
2517 | <Loading maskStyle={{top: '44px'}}/>
|
2518 | ```
|
2519 | [返回目录](#component)
|
2520 |
|
2521 |
|
2522 |
|
2523 |
|
2524 |
|
2525 |
|
2526 |
|
2527 |
|
2528 |
|
2529 |
|
2530 |
|
2531 |
|
2532 |
|
2533 |
|
2534 |
|
2535 |
|
2536 | ## LotteryWheel
|
2537 | [签名](https://unpkg.com/seedsui-react/src/lib/LotteryWheel/LotteryWheel.js)
|
2538 | ### 属性
|
2539 | ```javascript
|
2540 | <LotteryWheel
|
2541 | // 数据源
|
2542 | data={转盘数据 array, 默认无} // [{text: '', icon: '', font: '', fontTop...同数据默认值}]
|
2543 | // 数据默认值
|
2544 | fontFamily={文字名称 string, 默认'Arial'}
|
2545 | fontSize={文字大小 number, 默认13}
|
2546 | fontTop={文字头部距离 number, 默认28}
|
2547 | fontFillStyle={文字填充样式 string, 默认'#ef694f'}
|
2548 |
|
2549 | bgFillStyle={背景填充样式 string, 默认'#ffdf7d'}
|
2550 | bgStrokeStyle={背景边框样式 string, 默认'#fa8b6e'}
|
2551 | bgLineWidth={背景边框宽度 number, 默认1}
|
2552 |
|
2553 | iconWidth={图标宽度 number, 默认42}
|
2554 | iconHeight={图标高度 number, 默认42}
|
2555 | iconTop={图标头部距离 number, 默认42}
|
2556 |
|
2557 | around={转动圈数 number, 默认6}
|
2558 | // 不能使用style制定宽高,canvas用style的width|height会导致绘图位置不正确
|
2559 | width={转盘宽度 number, 默认300}
|
2560 | height={转盘高度 number, 默认300}
|
2561 | style={转盘style object, 默认无}
|
2562 | className={转盘className string, 默认无}
|
2563 | // 间隔
|
2564 | spacing={转盘绘制的间距 number, 默认10}
|
2565 | // 保存
|
2566 | suffix={图片保存类型 string, 默认'image/png'}
|
2567 | quality={图片保存质量 number, 默认0.92}
|
2568 | />
|
2569 | ```
|
2570 | ### 示例
|
2571 | ```javascript
|
2572 | import LotteryWheel from 'seedsui-react/lib/LotteryWheel';
|
2573 | import Device from '../lib/Device';
|
2574 |
|
2575 |
|
2576 | this.state = {
|
2577 | data: [
|
2578 | {bgFillStyle: '#ffcd76', text: '大奖', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gift.png'},
|
2579 | {text: '100积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2580 | {bgFillStyle: '#ffcd76', text: '200积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2581 | {text: '300积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2582 | {bgFillStyle: '#ffcd76', text: '400积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2583 | {text: '500积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2584 | {bgFillStyle: '#ffcd76', text: '600积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2585 | {text: '700积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'}
|
2586 | ]
|
2587 | }
|
2588 |
|
2589 | playing = false
|
2590 | play = () => {
|
2591 | if (this.playing) {
|
2592 | console.log('playing...');
|
2593 | return;
|
2594 | }
|
2595 | this.playing = true
|
2596 | this.$lotterywheel.instance.reset();
|
2597 | setTimeout(() => {
|
2598 | this.$lotterywheel.instance.play(2, () => {
|
2599 | console.log('转动完成')
|
2600 | });
|
2601 | }, 10);
|
2602 | setTimeout(() => {
|
2603 | this.playing = false
|
2604 | this.setState({
|
2605 | data: [
|
2606 | {bgFillStyle: '#ffcd76', text: '200积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2607 | {text: '300积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2608 | {bgFillStyle: '#ffcd76', text: '大奖', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gift.png'},
|
2609 | {text: '100积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2610 | {bgFillStyle: '#ffcd76', text: '400积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2611 | {text: '500积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2612 | {bgFillStyle: '#ffcd76', text: '600积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'},
|
2613 | {text: '700积分', icon: '//res.waiqin365.com/d/dinghuo365/lotterywheel/gold.png'}
|
2614 | ]
|
2615 | })
|
2616 | }, 5000);
|
2617 | }
|
2618 |
|
2619 | const containerWidth = Device.screenWidth - 40;
|
2620 | const wrapperWidth = containerWidth * 0.85;
|
2621 |
|
2622 | <div className="lotterywheel-container" style={{width: containerWidth + 'px', height: containerWidth + 'px', overflow: 'hidden'}}>
|
2623 | <LotteryWheel
|
2624 | ref={(el) => {this.$lotterywheel = el;}}
|
2625 | width={wrapperWidth}
|
2626 | height={wrapperWidth}
|
2627 | iconWidth={containerWidth * 0.1}
|
2628 | iconHeight={containerWidth * 0.1}
|
2629 | data={this.state.data}
|
2630 | />
|
2631 | <img className="lotterywheel-border" src={'//res.waiqin365.com/d/dinghuo365/lotterywheel/border.png'} alt=""/>
|
2632 | <img className="lotterywheel-pointer" src={'//res.waiqin365.com/d/dinghuo365/lotterywheel/pointer.png'} alt="" onClick={this.play}/>
|
2633 | </div>
|
2634 | ```
|
2635 | [返回目录](#component)
|
2636 |
|
2637 |
|
2638 |
|
2639 |
|
2640 |
|
2641 |
|
2642 |
|
2643 |
|
2644 |
|
2645 |
|
2646 |
|
2647 | ## Mark
|
2648 | [标记](https://unpkg.com/seedsui-react/src/lib/Mark/Mark.js)
|
2649 | ### 属性
|
2650 | ```javascript
|
2651 | <Mark
|
2652 | className={标记className string, 默认无, 基础'card'} // 'info | success | cancel | warn | disable | primary | hint'
|
2653 | {...others}
|
2654 | >
|
2655 | 标记文字
|
2656 | </Mark>
|
2657 | ```
|
2658 | ### 示例
|
2659 | ```javascript
|
2660 | import Mark from 'seedsui-react/lib/Mark';
|
2661 |
|
2662 | <Mark className="success">进行中</Mark>
|
2663 | ```
|
2664 | [返回目录](#component)
|
2665 |
|
2666 |
|
2667 |
|
2668 | ## Marquee
|
2669 | [跑马灯](https://unpkg.com/seedsui-react/src/lib/Marquee/Marquee.js)
|
2670 | ### 属性
|
2671 | ```javascript
|
2672 | <Marquee
|
2673 | style={容器style object, 默认无}
|
2674 | className={容器className string, 默认无, 基础'marquee'}
|
2675 | list={列表 array, 默认无} // [{key: 'xx', value: ''}]
|
2676 |
|
2677 | contentStyle={单条style object, 默认无}
|
2678 | contentClassName={单条className string, 默认无, 基础'marquee-li'}
|
2679 |
|
2680 | step={一次移动数值 number, 默认50}
|
2681 | duration={移动动画时长 number, 默认300}
|
2682 | delay={一次移动停留时长 number, 默认2000}
|
2683 | direction={移动方向 string, 默认'top'} // 'top | bottom | left | right'
|
2684 | loop={是否循环 bool, 默认true}
|
2685 | onClick={点击 func(item, index), 默认无}
|
2686 | />
|
2687 | ```
|
2688 | ### 示例
|
2689 | ```javascript
|
2690 | import Marquee from 'seedsui-react/lib/Marquee';
|
2691 | const list = [
|
2692 | {
|
2693 | key: '1',
|
2694 | value: '标题标题'
|
2695 | }
|
2696 | ]
|
2697 | <Marquee
|
2698 | list={list}
|
2699 | onClick={onClick}
|
2700 | step={48}
|
2701 | contentStyle={{height: '38px', padding: '5px 0'}}
|
2702 | contentClassName="flex flex-center nowrap2"
|
2703 | />
|
2704 | ```
|
2705 | [返回目录](#component)
|
2706 |
|
2707 |
|
2708 |
|
2709 | ## MenuTiled
|
2710 | [平铺弹出菜单](https://unpkg.com/seedsui-react/src/lib/MenuTiled/MenuTiled.js)
|
2711 | , [MenuTiled下拉菜单](#menutiled)组件的子组件
|
2712 | ### 属性
|
2713 | ```javascript
|
2714 | <MenuTiled
|
2715 | style={容器style object, 默认无}
|
2716 | className={容器className string, 默认无, 基础'marquee'}
|
2717 | list={列表 array, 默认无} // [{id: '1',caption: '测试数据1',children:[]}]
|
2718 | selectedId={默认选中项的id string, 默认无}
|
2719 | onClick={点击 func(s, item, isActived, isExtand: true展开 | false收缩, childrenCount), 默认无}
|
2720 | />
|
2721 | ```
|
2722 | ### 示例
|
2723 | ```javascript
|
2724 | import MenuTiled from 'seedsui-react/lib/MenuTiled';
|
2725 | // const menus = [
|
2726 | // {
|
2727 | // id: '1',
|
2728 | // name: '测试数据1',
|
2729 | // children: [
|
2730 | // {
|
2731 | // id: 'a',
|
2732 | // name: '测试数据1-a'
|
2733 | // },
|
2734 | // {
|
2735 | // id: 'b',
|
2736 | // name: '测试数据1-b',
|
2737 | // children: [
|
2738 | // {
|
2739 | // id: 'I',
|
2740 | // name: '测试数据1-b-I'
|
2741 | // },
|
2742 | // {
|
2743 | // id: 'II',
|
2744 | // name: '测试数据1-b-II'
|
2745 | // }
|
2746 | // ]
|
2747 | // }
|
2748 | // ]
|
2749 | // }
|
2750 | // ];
|
2751 | const menus = [
|
2752 | {id: '1', name: '测试数据1', parentid: '-1'},
|
2753 | {id: 'a', name: '测试数据1-a', parentid: '1'},
|
2754 | {id: 'b', name: '测试数据1-b', parentid: '1'},
|
2755 | {id: 'I', name: '测试数据1-b-I', parentid: 'b'},
|
2756 | {id: 'II', name: '测试数据1-b-II', parentid: 'b'}
|
2757 | ];
|
2758 |
|
2759 | onClickMenu = (e, item, isActived, isExtand, childrenCount) => {
|
2760 | console.log(e, item, isActived, isExtand, childrenCount);
|
2761 | }
|
2762 |
|
2763 | <MenuTiled list={menus} selectedId={'b'} onClick={this.onClickMenu}/>
|
2764 | ```
|
2765 | [返回目录](#component)
|
2766 |
|
2767 |
|
2768 |
|
2769 | ## MenuTree
|
2770 | [侧边树形菜单](https://unpkg.com/seedsui-react/src/lib/MenuTree/MenuTree.js)
|
2771 | ### 属性
|
2772 | ```javascript
|
2773 | <MenuTree
|
2774 | style={容器style object, 默认无}
|
2775 | className={容器className string, 默认无, 基础'menutree'}
|
2776 | list={列表 array, 默认无, 示例如下:}
|
2777 | /* list: [{
|
2778 | id: '',
|
2779 | caption: '',
|
2780 | active: false,
|
2781 | children
|
2782 | }] */
|
2783 | selectedId={默认选中项的id string, 默认无}
|
2784 | onClick={点击 func(s, item, isActived, isExtand: true展开 | false收缩, childrenCount), 默认无}
|
2785 | />
|
2786 | ```
|
2787 | ### 示例
|
2788 | ```javascript
|
2789 | import MenuTree from 'seedsui-react/lib/MenuTree';
|
2790 |
|
2791 | const mockData = [
|
2792 | {id: '2', name: '测试数据2', parentid: '-1'},
|
2793 | {id: '1', name: '测试数据1', parentid: '-1'},
|
2794 | {id: 'a', name: '测试数据1-a', parentid: '1'},
|
2795 | {id: 'b', name: '测试数据1-b', parentid: '1'},
|
2796 | {id: 'I', name: '测试数据1-b-I', parentid: 'b'},
|
2797 | {id: 'II', name: '测试数据1-b-II', parentid: 'b'}
|
2798 | ];
|
2799 |
|
2800 | this.state = {
|
2801 | selectedId: '2',
|
2802 | data: mockData
|
2803 | }
|
2804 |
|
2805 | clearData = () => {
|
2806 | this.setState({
|
2807 | data: []
|
2808 | });
|
2809 | }
|
2810 | addData = () => {
|
2811 | this.setState({
|
2812 | data: mockData
|
2813 | });
|
2814 | }
|
2815 |
|
2816 | <MenuTree ref="$menutree" list={this.state.data} selectedId={this.state.selectedId} onClick={this.onClickMenu}/>
|
2817 | <input type="button" value="置空" onClick={this.clearData}/>
|
2818 | <input type="button" value="显示" onClick={this.addData}/>
|
2819 | ```
|
2820 | [返回目录](#component)
|
2821 |
|
2822 |
|
2823 |
|
2824 |
|
2825 |
|
2826 |
|
2827 |
|
2828 | ## Notice
|
2829 | [公告](https://unpkg.com/seedsui-react/src/lib/Notice/Notice.js)
|
2830 | ### 属性
|
2831 | ```javascript
|
2832 | <Notice
|
2833 | style={容器style object, 默认无}
|
2834 | className={容器className string, 默认无, 基础'notice'}
|
2835 |
|
2836 | wrapperParams={样式为notice-wrapper的div容器属性 object, 默认无}
|
2837 |
|
2838 | icon={图标dom node, 默认无}
|
2839 |
|
2840 | caption={标题 string, 默认'暂无数据'}
|
2841 | captionParams={样式为notice-wrapper的div属性 object, 默认无}
|
2842 | sndcaption={副标题 string, 默认''}
|
2843 | sndcaptionParams={样式为notice-wrapper的div属性 object, 默认无}
|
2844 |
|
2845 | children={wrapper容器内子元素 node, 默认无}
|
2846 |
|
2847 | {...others}
|
2848 | >
|
2849 | 其它内容
|
2850 | </Notice>
|
2851 | ```
|
2852 | ### 示例
|
2853 | ```javascript
|
2854 | import Notice from 'seedsui-react/lib/Notice';
|
2855 |
|
2856 | <Notice iconClassName="icon-no-network" caption="网络状态不佳" sndcaption="请尝试开关飞行模式后再试"/>
|
2857 | ```
|
2858 | [返回目录](#component)
|
2859 |
|
2860 |
|
2861 |
|
2862 |
|
2863 |
|
2864 |
|
2865 |
|
2866 | ## NumBox
|
2867 | [数字加减框](https://unpkg.com/seedsui-react/src/lib/NumBox/NumBox.js)
|
2868 | 只有valueBindProp模式
|
2869 | ### 属性
|
2870 | ```javascript
|
2871 | <NumBox
|
2872 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
2873 | changeFocus={是否点击加減时获取焦点 bool, 默认无}
|
2874 | // 容器
|
2875 | style={容器style object, 默认无}
|
2876 | className={容器className string, 默认无, 基础'numbox bordered'}
|
2877 | // 文本框
|
2878 | inputStyle={文本框style object, 默认无}
|
2879 | inputClassName={文本框className string, 默认无, 基础'numbox-input'}
|
2880 | value={值 string | number, 默认无}
|
2881 | digits={文本框截取小数 string | number, 默认无}
|
2882 | max={最大值 string | number, 默认无}
|
2883 | min={最小值 string | number, 默认无}
|
2884 | placeholder={占位符 string, 默认''}
|
2885 | name={文本框name string, 默认无}
|
2886 | maxLength={输入长度 string, 默认'16'}
|
2887 | disabled={是否禁用 bool, 默认无}
|
2888 | readOnly={是否只读 bool, 默认无}
|
2889 | required={是否必填 bool, 默认true} // 如果设置必填,则框内一定有值,默认为最小值或者0
|
2890 | // 左右图标
|
2891 | licon={左图标 node, 默认无}
|
2892 | liconSrc={左图标地址 node, 默认无}
|
2893 | liconClassName={左图标className string, 默认无, 基础'licon'}
|
2894 | liconStyle={左图标style object, 默认无}
|
2895 | onClickLicon={点击左图标 func(args), 默认无}
|
2896 | liconLazyLoad={左图标懒人加载 bool, 默认无}
|
2897 |
|
2898 | ricon={右图标 node, 默认无}
|
2899 | riconSrc={右图标地址 node, 默认无}
|
2900 | riconClassName={右图标className string, 默认无, 基础'ricon'}
|
2901 | riconStyle={右图标style object, 默认无}
|
2902 | onClickRicon={点击右图标 func(args), 默认无}
|
2903 | riconLazyLoad={右图标懒人加载 bool, 默认无}
|
2904 |
|
2905 | // 清除按钮
|
2906 | clear={清除 bool | func('', args), 默认无}
|
2907 | clearClassName={清除图标className string, 默认'ricon close-icon-clear size18'} // 见Close组件
|
2908 | clearStyle={清除图标style object, 默认无}
|
2909 | // events
|
2910 | onClick={点击容器 func(e), 默认无}
|
2911 | onClickMinus={点击减 func(value, args), 默认无}
|
2912 | onClickPlus={点击加 func(value, args), 默认无}
|
2913 | onClickInput={点击文本框 func(e), 默认无}
|
2914 | onChange={值发生变化 func(value, args), 默认无}
|
2915 | onBlur={失去焦点 func(value, args), 默认无}
|
2916 | onFocus={获取焦点 func(value, args), 默认无}
|
2917 | onError={值发生变化 func({msg:''}), 默认无}
|
2918 | {...others}
|
2919 | />
|
2920 | ```
|
2921 | ### 示例
|
2922 | ```javascript
|
2923 | import NumBox from 'seedsui-react/lib/NumBox';
|
2924 |
|
2925 | this.state = {
|
2926 | value: ''
|
2927 | }
|
2928 |
|
2929 | onChangeNum = (val, args) => {
|
2930 | console.log(val, args)
|
2931 | this.setState({
|
2932 | value: val
|
2933 | })
|
2934 | }
|
2935 |
|
2936 | <NumBox
|
2937 | className="lg"
|
2938 | digits={2}
|
2939 | value={this.state.value}
|
2940 | onChange={this.onChangeNum}
|
2941 | args={['arg1', 'arg2']}
|
2942 | />
|
2943 | ```
|
2944 | [返回目录](#component)
|
2945 |
|
2946 |
|
2947 | ## NumBoxPop
|
2948 | [数字加减弹出框](https://unpkg.com/seedsui-react/src/lib/NumBoxPop/NumBoxPop.js)
|
2949 | , 基于[NumBox 数字加减框](#numbox)组件, others是NumBox的属性
|
2950 | ### 属性
|
2951 | ```javascript
|
2952 | <NumBoxPop
|
2953 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
2954 | // 容器
|
2955 | show={*显隐 bool, 默认false}
|
2956 | caption={标题 string, 默认'修改购买数量'}
|
2957 | // 文本框
|
2958 | value={值 string | number, 默认'1'}
|
2959 | // events
|
2960 | onClickCancel={点击取消 func(value, args), 默认无}
|
2961 | onClickSubmit={点击确定 func(value, args), 默认无}
|
2962 | // numbox属性
|
2963 | {...others}
|
2964 | />
|
2965 | ```
|
2966 | ### 示例
|
2967 | ```javascript
|
2968 | import NumBoxPop from 'seedsui-react/lib/NumBoxPop';
|
2969 |
|
2970 | this.state = {
|
2971 | show: true
|
2972 | }
|
2973 | onClickCancel = () => {
|
2974 | this.setState({show: false});
|
2975 | }
|
2976 | onClickSubmit = (count) => {
|
2977 | this.setState({show: false});
|
2978 | }
|
2979 |
|
2980 | <NumBoxPop
|
2981 | min={1}
|
2982 | show={this.state.show}
|
2983 | value='5'
|
2984 | onClickCancel={this.onClickCancel}
|
2985 | onClickSubmit={this.onClickSubmit}
|
2986 | />
|
2987 | ```
|
2988 | [返回目录](#component)
|
2989 |
|
2990 |
|
2991 |
|
2992 | ## NumBoxPopPointer
|
2993 | [数字加减指针](https://unpkg.com/seedsui-react/src/lib/NumBoxPopPointer/NumBoxPopPointer.js)
|
2994 | , 基于[NumBoxPop 数字加减弹出框](#numboxpop)组件
|
2995 | , 且基于[NumBox 数字加减框](#numbox)组件, others是NumBox的属性
|
2996 | ### 属性
|
2997 | ```javascript
|
2998 | <NumBoxPopPointer
|
2999 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
3000 | // 容器
|
3001 | containerClassName={容器className string, 默认无}
|
3002 | containerStyle={容器style object, 默认无, 基础{position: 'relative'}}
|
3003 | // pointer的numbox
|
3004 | style={numbox框style object, 默认无}
|
3005 | className={numbox框className string, 默认'sm'}
|
3006 | value={值 string | number, 默认无}
|
3007 | digits={文本框截取小数 string | number, 默认无}
|
3008 | min={最小值 string | number, 默认0}
|
3009 | max={最大值 string | number, 默认99999999}
|
3010 | disabled={是否禁用 bool, 默认无}
|
3011 | // pointer的unit
|
3012 | unitClassName={单位className string, 默认无}
|
3013 | unitStyle={numbox框style object, 默认{fontSize: '13px', marginLeft: '8px'}}
|
3014 | unit={单位 string, 默认无}
|
3015 | // events
|
3016 | onChange={点击确定时触发 func(value, args), 默认无}
|
3017 | // 弹出numbox属性
|
3018 | {...others}
|
3019 | />
|
3020 | ```
|
3021 | ### 示例
|
3022 | ```javascript
|
3023 | import NumBoxPopPointer from 'seedsui-react/lib/NumBoxPopPointer';
|
3024 |
|
3025 | onChangeCount = (value) => {
|
3026 | console.log(value)
|
3027 | }
|
3028 |
|
3029 | <NumBoxPopPointer
|
3030 | min={1}
|
3031 | value={'3'}
|
3032 | unit={'/箱'}
|
3033 | onChange={this.onChangeCount}
|
3034 | />
|
3035 | ```
|
3036 | [返回目录](#component)
|
3037 |
|
3038 |
|
3039 | ## OnOff
|
3040 | [开关](https://unpkg.com/seedsui-react/src/lib/OnOff/OnOff.js)
|
3041 | ### 属性
|
3042 | ```javascript
|
3043 | <OnOff
|
3044 | style={容器style object, 默认无}
|
3045 | className={容器className string, 默认无, 基础'onoff'}
|
3046 | readOnly={是否只读 bool, 默认无}
|
3047 | checked={是否选中 bool, 默认无} // 选中时clasName将会增加'active'
|
3048 | onCaption={开文字 string, 默认无} // 开关文字有一个为空时, className将会增加'notext'
|
3049 | offCaption={关文字 string, 默认无}
|
3050 | onClick={点击容器 func(bool), 默认无}
|
3051 | />
|
3052 | ```
|
3053 | ### 示例
|
3054 | ```javascript
|
3055 | import Checkbox from 'seedsui-react/lib/Checkbox';
|
3056 |
|
3057 | onClick = (checked) => {
|
3058 | this.props.checkChange(!checked)
|
3059 | }
|
3060 |
|
3061 | const {checked} = this.props;
|
3062 | <List
|
3063 | className="list-li-oneline"
|
3064 | caption="设置为默认收货地址"
|
3065 | rcaption={
|
3066 | <OnOff
|
3067 | readOnly={this.state.isFirst}
|
3068 | className="reverse"
|
3069 | checked={is_default === '0'}
|
3070 | onClick={(isChecked) => {defaultChange(isChecked ? '1' : '0')}}
|
3071 | />
|
3072 | }
|
3073 | />
|
3074 | ```
|
3075 | [返回目录](#component)
|
3076 |
|
3077 |
|
3078 | ## Page
|
3079 | [页面](https://unpkg.com/seedsui-react/src/lib/Page/Page.js)
|
3080 | , 通常与Container、Header一起使用
|
3081 | ### 属性
|
3082 | ```javascript
|
3083 | <Page
|
3084 | style={容器style object, 默认无}
|
3085 | className={容器className string, 默认无, 基础'page'}
|
3086 | animation={动画 string, 默认无} // slideLeft | slideRight | slideUp | slideDown | zoom | fade
|
3087 | {...others}
|
3088 | >
|
3089 | 页面
|
3090 | </Page>
|
3091 | ```
|
3092 | ### 示例
|
3093 | ```javascript
|
3094 | import Page from 'seedsui-react/lib/Page';
|
3095 | import Header from 'seedsui-react/lib/Header';
|
3096 | import Container from 'seedsui-react/lib/Container';
|
3097 |
|
3098 | <Page>
|
3099 | <Header>
|
3100 | 头部
|
3101 | </Header>
|
3102 | <Container>
|
3103 | 中部
|
3104 | </Container>
|
3105 | </Page>
|
3106 | ```
|
3107 | [返回目录](#component)
|
3108 |
|
3109 |
|
3110 | ## PagePull
|
3111 | [可推动页面](https://unpkg.com/seedsui-react/src/lib/PagePull/PagePull.js)
|
3112 | , 基于[Page 页面](#page)组件
|
3113 | ### 属性
|
3114 | ```javascript
|
3115 | <PagePull
|
3116 | // Side 侧边栏
|
3117 | drag={是否允许拖拽 bool, 默认true}
|
3118 | lSide={左侧边栏 node, 默认无}
|
3119 | lSideStyle={左侧边栏style object, 默认无}
|
3120 | lSideClassName={左侧边栏className string, 默认无, 基础'page-side-left'}
|
3121 | rSide={右侧边栏 node, 默认无}
|
3122 | rSideStyle={右侧边栏style object, 默认无}
|
3123 | rSideClassName={右侧边栏className string, 默认无, 基础'page-side-right'}
|
3124 | transition={过渡动画 string, 默认'push'} // 'push | reveal'
|
3125 | onShowedLeft={左侧显示 func(s), 默认无}
|
3126 | onShowedRight={右侧显示 func(s), 默认无}
|
3127 | {...others}
|
3128 | >
|
3129 | 页面
|
3130 | </PagePull>
|
3131 | ```
|
3132 | ### 示例
|
3133 | ```javascript
|
3134 | import Page from 'seedsui-react/lib/Page';
|
3135 | import Header from 'seedsui-react/lib/Header';
|
3136 | import Container from 'seedsui-react/lib/Container';
|
3137 |
|
3138 | <PagePull lSide={<p>左侧边栏</p>} rSide={<p>右侧边栏</p>}>
|
3139 | <Header>
|
3140 | 头部
|
3141 | </Header>
|
3142 | <Container>
|
3143 | 中部
|
3144 | </Container>
|
3145 | </PagePull>
|
3146 | ```
|
3147 | [返回目录](#component)
|
3148 |
|
3149 |
|
3150 |
|
3151 |
|
3152 | ## Peg
|
3153 | [小竖条](https://unpkg.com/seedsui-react/src/lib/Peg/Peg.js)
|
3154 | ### 属性
|
3155 | ```javascript
|
3156 | <Peg
|
3157 | className={图标className string, 默认无, 基础'peg'}
|
3158 | {...others}
|
3159 | />
|
3160 | ```
|
3161 | ### 示例
|
3162 | ```javascript
|
3163 | import Peg from 'seedsui-react/lib/Peg';
|
3164 |
|
3165 | <Peg/>
|
3166 | ```
|
3167 | [返回目录](#component)
|
3168 |
|
3169 |
|
3170 |
|
3171 |
|
3172 | ## Picker
|
3173 | [滚动选择弹框](https://unpkg.com/seedsui-react/src/lib/Picker/Picker.js)
|
3174 | ### 属性
|
3175 | ```javascript
|
3176 | <Picker
|
3177 | portal={传送dom object, 默认document.getElementById('root')}
|
3178 | show={*显隐 bool, 默认false}
|
3179 |
|
3180 | value={值 number | string, 默认无}
|
3181 | valueForKey={选中key number | string, 默认无}
|
3182 |
|
3183 | list={列表 array, 默认无} // 格式 [{key: '', value: ''}]
|
3184 |
|
3185 | maskStyle={遮罩style object, 默认无}
|
3186 | maskClassName={遮罩className string, 默认无, 基础'mask popover-mask'}
|
3187 | style={容器style object, 默认无}
|
3188 | className={容器className string, 默认无, 基础'picker'}
|
3189 |
|
3190 | slotClassName={一槽className string, 默认'text-center'}
|
3191 | onClickMask={点击遮罩 func, 默认无}
|
3192 | onClickCancel={点击取消按钮 func(s), 默认无}
|
3193 | onClickSubmit={点击确定按钮 func(s), 默认无}
|
3194 | />
|
3195 | ```
|
3196 | ### 示例
|
3197 | ```javascript
|
3198 | import Picker from 'seedsui-react/lib/Picker';
|
3199 |
|
3200 | const mockPickerList = [{
|
3201 | "key": "7004955043756964827",
|
3202 | "value": "瓶"
|
3203 | }, {
|
3204 | "key": "5796844733294559575",
|
3205 | "value": "箱(=25.0000瓶)"
|
3206 | }];
|
3207 |
|
3208 | this.state = {
|
3209 | pickerShow: false,
|
3210 | pickerId: '',
|
3211 | pickerList: []
|
3212 | }
|
3213 |
|
3214 | onClickSubmit = (e) => {
|
3215 | const value = e.activeOptions[0].value;
|
3216 | console.log(value);
|
3217 | this.hidePicker();
|
3218 | }
|
3219 | hidePicker = () => {
|
3220 | this.setState({
|
3221 | pickerShow: false
|
3222 | });
|
3223 | }
|
3224 | showPicker = () => {
|
3225 | this.setState({
|
3226 | pickerShow: true
|
3227 | });
|
3228 | }
|
3229 | onClick = () => {
|
3230 | this.setState({
|
3231 | pickerId: '5796844733294559575',
|
3232 | pickerList: mockPickerList,
|
3233 | pickerShow: true
|
3234 | });
|
3235 | }
|
3236 |
|
3237 | <input type="button" value="显示" onClick={this.onClick}/>
|
3238 |
|
3239 | <Picker
|
3240 | list={this.state.pickerList}
|
3241 | valueForKey={this.state.pickerId}
|
3242 | show={this.state.pickerShow}
|
3243 | onClickSubmit={this.onClickSubmit}
|
3244 | onClickCancel={this.hidePicker}
|
3245 | onClickMask={this.hidePicker}
|
3246 | />
|
3247 | ```
|
3248 | [返回目录](#component)
|
3249 |
|
3250 |
|
3251 |
|
3252 |
|
3253 | ## PickerCity
|
3254 | [城市选择弹框](https://unpkg.com/seedsui-react/src/lib/PickerCity/PickerCity.js)
|
3255 | , 基于[Picker 滚动选择弹框](#picker)组件
|
3256 | ### 属性
|
3257 | ```javascript
|
3258 | <PickerCity
|
3259 | data={数据源 array, 默认内置数据源}
|
3260 | dataKeyPropertyName={data数据key的属性名称 string, 默认'key'}
|
3261 | dataValuePropertyName={data数据value的属性名称 string, 默认'value'}
|
3262 | dataChildPropertyName={data数据child的属性名称 string, 默认'children'}
|
3263 | // export default [
|
3264 | // {
|
3265 | // "value": "北京",
|
3266 | // "children": [
|
3267 | // {
|
3268 | // "value": "东城区",
|
3269 | // "key": "110101"
|
3270 | // }
|
3271 | // ]
|
3272 | // }
|
3273 | // ]
|
3274 | portal={传送dom object, 默认document.getElementById('root')}
|
3275 | valueForKey={选中key string, 默认无}
|
3276 | split={分隔符 string, 默认'-'}
|
3277 | type={类型 string, 默认'area'} // area | city
|
3278 |
|
3279 | maskStyle={遮罩style object, 默认无}
|
3280 | maskClassName={遮罩className string, 默认无, 基础'mask popover-mask'}
|
3281 | className={容器className string, 默认无, 基础'picker'}
|
3282 | style={容器style object, 默认无}
|
3283 | value={值 string, 默认无}
|
3284 | show={*显隐 bool, 默认false}
|
3285 | onClickMask={点击遮罩 func, 默认无}
|
3286 | onClickCancel={点击取消按钮 func(s), 默认无}
|
3287 | onClickSubmit={点击确定按钮 func(s), 默认无}
|
3288 | />
|
3289 | ```
|
3290 | ### 示例
|
3291 | ```javascript
|
3292 | import PickerCity from 'seedsui-react/lib/PickerCity';
|
3293 |
|
3294 | onClickSubmit = (e) => {
|
3295 | const value = e.activeOptions[0].value;
|
3296 | console.log(value);
|
3297 | this.setState({
|
3298 | show: !this.state.show
|
3299 | });
|
3300 | }
|
3301 | onClickCancel = () => {
|
3302 | this.setState({
|
3303 | show: !this.state.show
|
3304 | });
|
3305 | }
|
3306 | onClickMask = () => {
|
3307 | this.setState({
|
3308 | show: !this.state.show
|
3309 | });
|
3310 | }
|
3311 |
|
3312 | <PickerCity
|
3313 | value=""
|
3314 | show={this.state.show}
|
3315 | onClickSubmit={this.onClickSubmit}
|
3316 | onClickCancel={this.onClickCancel}
|
3317 | onClickMask={this.onClickMask}
|
3318 | />
|
3319 | ```
|
3320 | [返回目录](#component)
|
3321 |
|
3322 |
|
3323 |
|
3324 | ## PickerDate
|
3325 | [日期选择弹框](https://unpkg.com/seedsui-react/src/lib/PickerDate/PickerDate.js)
|
3326 | , 基于[Picker 滚动选择弹框](#picker)组件
|
3327 | ### 属性
|
3328 | ```javascript
|
3329 | <PickerDate
|
3330 | valueForKey={选中key string, 默认无}
|
3331 | portal={传送dom object, 默认document.getElementById('root')}
|
3332 | split={分隔符 string, 默认'-'}
|
3333 | type={类型 string, 默认'area'} // area | city
|
3334 |
|
3335 | maskStyle={遮罩style object, 默认无}
|
3336 | maskClassName={遮罩className string, 默认无, 基础'mask popover-mask'}
|
3337 | className={容器className string, 默认无, 基础'picker'}
|
3338 | style={容器style object, 默认无}
|
3339 | value={值 string, 默认无}
|
3340 | show={*显隐 bool, 默认false}
|
3341 | onClickMask={点击遮罩 func, 默认无}
|
3342 | onClickCancel={点击取消按钮 func(s), 默认无}
|
3343 | onClickSubmit={点击确定按钮 func(s), 默认无}
|
3344 | onError={错误 func(s), 默认无}
|
3345 | />
|
3346 | ```
|
3347 | ### 示例
|
3348 | ```javascript
|
3349 | import PickerDate from 'seedsui-react/lib/PickerDate';
|
3350 |
|
3351 | onClickSubmit = (e) => {
|
3352 | const value = e.activeOptions[0].value;
|
3353 | console.log(value);
|
3354 | this.setState({
|
3355 | show: !this.state.show
|
3356 | });
|
3357 | }
|
3358 | onClickCancel = () => {
|
3359 | this.setState({
|
3360 | show: !this.state.show
|
3361 | });
|
3362 | }
|
3363 | onClickMask = () => {
|
3364 | this.setState({
|
3365 | show: !this.state.show
|
3366 | });
|
3367 | }
|
3368 |
|
3369 | <PickerDate
|
3370 | value=""
|
3371 | show={this.state.show}
|
3372 | onClickSubmit={this.onClickSubmit}
|
3373 | onClickCancel={this.onClickCancel}
|
3374 | onClickMask={this.onClickMask}
|
3375 | />
|
3376 | ```
|
3377 | [返回目录](#component)
|
3378 |
|
3379 |
|
3380 |
|
3381 |
|
3382 |
|
3383 | ## Player
|
3384 | [视频播放器](https://unpkg.com/seedsui-react/src/lib/Player/Player.js)
|
3385 |
|
3386 | ### 属性
|
3387 | ```javascript
|
3388 | <Player
|
3389 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
3390 | className={视频容器className string, 默认无, 基础'player-thumbnail'}
|
3391 | style={视频容器style object, 默认无}
|
3392 | children={视频容器内子元素 node, 默认无}
|
3393 |
|
3394 | src={视频播放地址 string, 默认无, 基础'player-thumbnail'}
|
3395 | onClick={点击视频 func(s), 默认无} // 设置此属性后,默认点击预览将会被此事件代替
|
3396 | {...others} // video标签的属性,例如poster
|
3397 | />
|
3398 | ```
|
3399 | ### 示例
|
3400 | ```javascript
|
3401 | import Player from 'seedsui-react/lib/Player';
|
3402 |
|
3403 | onClickVideo = (args) => {
|
3404 | Bridge.previewVideo({src: args.src});
|
3405 | }
|
3406 |
|
3407 | <Player
|
3408 | args={{src: ''}}
|
3409 | src={''}
|
3410 | onClick={this.onClickVideo}
|
3411 | />
|
3412 | ```
|
3413 | [返回目录](#component)
|
3414 |
|
3415 |
|
3416 |
|
3417 |
|
3418 |
|
3419 | ## Popover
|
3420 | [箭头弹框](https://unpkg.com/seedsui-react/src/lib/Popover/Popover.js)
|
3421 | ### 属性
|
3422 | ```javascript
|
3423 | <Popover
|
3424 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
3425 | portal={传送dom object, 默认document.getElementById('root')}
|
3426 | show={*显隐 bool, 默认false}
|
3427 |
|
3428 | animation={动画 string, 默认'zoom'} // slideLeft | slideRight | slideUp | slideDown | zoom | fade
|
3429 | isClickMaskHide={是否点击遮罩隐藏 bool, 默认true}
|
3430 |
|
3431 | maskStyle={遮罩style object, 默认无}
|
3432 | maskClassName={遮罩className string, 默认无, 基础'mask popover-mask'}
|
3433 | onClickMask={点击遮罩 func(args), 默认无}
|
3434 |
|
3435 | className={容器className string, 默认无, 基础'popover'}
|
3436 | // 'top-left | top-center | top-right | left-top | left-middle | left-bottom', 其中top与bottom、left与right拥有相同属性
|
3437 | style={容器style object, 默认无}
|
3438 | >
|
3439 | 内容内容
|
3440 | </Popover>
|
3441 | ```
|
3442 | ### 示例
|
3443 | ```javascript
|
3444 | import Popover from 'seedsui-react/lib/Popover';
|
3445 |
|
3446 | this.state = {
|
3447 | popoverStyle: {top: '44px', right: '12px'},
|
3448 | popoverClassName: 'top-left',
|
3449 | popoverShow: false
|
3450 | }
|
3451 |
|
3452 | // 更多操作
|
3453 | showPopover = (e) => {
|
3454 | if (!e.target) {
|
3455 | Bridge.showToast('没有元素, 无法查看更多', {mask: false});
|
3456 | return;
|
3457 | }
|
3458 | const clientRect = e.target.getBoundingClientRect();
|
3459 | // 如果超过屏幕的的4/3, 则向上弹
|
3460 | const screenHeight = Device.screenHeight;
|
3461 | let popoverStyle = {top: Math.Calc.add(clientRect.y, 28) + 'px', left: clientRect.x + 'px'};
|
3462 | let popoverClassName = 'top-left';
|
3463 | if (clientRect.y / screenHeight > 0.75) {
|
3464 | popoverStyle = {bottom: Math.Calc.add(Math.Calc.subtract(screenHeight, clientRect.y), 6) + 'px', left: clientRect.x + 'px'};
|
3465 | popoverClassName = 'bottom-left';
|
3466 | }
|
3467 | this.setState({
|
3468 | popoverStyle: popoverStyle,
|
3469 | popoverClassName: popoverClassName,
|
3470 | popoverShow: true
|
3471 | });
|
3472 | }
|
3473 | hidePopover = () => {
|
3474 | this.setState({
|
3475 | popoverShow: false
|
3476 | })
|
3477 | }
|
3478 |
|
3479 |
|
3480 | <input type="button" value="显示" onClick={this.showPopover} style={{position: 'absolute', left: '50%', top: '20px'}}/>
|
3481 | {/* 更多操作 */}
|
3482 | <Popover show={this.state.popoverShow} className={this.state.popoverClassName} style={this.state.popoverStyle} onClickMask={this.hidePopover}>
|
3483 | 操作操作<br/>
|
3484 | 操作操作<br/>
|
3485 | 操作操作<br/>
|
3486 | 操作操作<br/>
|
3487 | 操作操作
|
3488 | </Popover>
|
3489 |
|
3490 | ```
|
3491 | [返回目录](#component)
|
3492 |
|
3493 |
|
3494 |
|
3495 |
|
3496 |
|
3497 |
|
3498 |
|
3499 |
|
3500 |
|
3501 |
|
3502 | ## Preview
|
3503 | [提示弹框](https://unpkg.com/seedsui-react/src/lib/Preview/Preview.js)
|
3504 | ### 建议
|
3505 | Preview预览组件, 为了解决需要预览图片上方加浮动层的问题, 一般预览建议直接使用Api直接调用:
|
3506 | * Bridge.previewImage({urls: [src], layerHTML: `<div class="preview-layer" style="background-image:url(${layer})"></div>`})代替
|
3507 |
|
3508 | 详见[Bridge 桥接库](#bridge) 桥接库
|
3509 | ### 属性
|
3510 | ```javascript
|
3511 | <Preview
|
3512 | portal={传送dom object, 默认document.getElementById('root')}
|
3513 | show={*显隐 bool, 默认false}
|
3514 | showHeader={是否显示操作头 bool, 默认false}
|
3515 |
|
3516 | src={图片地址 string, 默认无}
|
3517 | layerHTML={图片上方浮层 string, 默认无}
|
3518 |
|
3519 | onClickBack={点击返回按钮 func(), 默认无}
|
3520 | />
|
3521 | ```
|
3522 | ### 示例
|
3523 | ```javascript
|
3524 | import Preview from 'seedsui-react/lib/Preview';
|
3525 |
|
3526 | this.state = {
|
3527 | showPreview: false,
|
3528 | previewSrc: 'http://image-test.waiqin365.com/6692513571099135446/sku/201809/20180911195747712_05105130_CAMERA_21001006280.jpg',
|
3529 | }
|
3530 |
|
3531 | onPreview = () => {
|
3532 | this.setState((prevState) => {
|
3533 | return {
|
3534 | showPreview: !prevState.showPreview
|
3535 | }
|
3536 | });
|
3537 | }
|
3538 |
|
3539 | <input type="button" value="显示" onClick={this.onPreview}/>
|
3540 | <Preview
|
3541 | show={this.state.showPreview}
|
3542 | src={this.state.previewSrc}
|
3543 | layerHTML={`<div class="preview-layer" style="background-image:url(//res.waiqin365.com/d/common_mobile/images/placeholder/watermark.png)"></div>`}
|
3544 | onClickBack={this.onPreview}
|
3545 | />
|
3546 | ```
|
3547 | [返回目录](#component)
|
3548 |
|
3549 |
|
3550 |
|
3551 |
|
3552 |
|
3553 |
|
3554 |
|
3555 |
|
3556 |
|
3557 |
|
3558 | ## Progress
|
3559 | [进度条](https://unpkg.com/seedsui-react/src/lib/Progress/Progress.js)
|
3560 | ### 属性
|
3561 | ```javascript
|
3562 | <Progress
|
3563 | className={容器className string, 默认无, 基础'progress'}
|
3564 | style={容器style object, 默认无}
|
3565 |
|
3566 | barStyle={进度条style object, 默认无}
|
3567 | barClassName={进度条className string, 默认无, 基础'progress-bar'}
|
3568 |
|
3569 | captionClassName={进度条文字className string, 默认无, 基础'progress-caption'}
|
3570 | captionStyle={进度条文字style object, 默认无}
|
3571 |
|
3572 | percentage={百分比 number, 默认无} // 百分比与max min value, 只要一种就行了
|
3573 | max={最大值 number, 默认100}
|
3574 | min={最小值 number, 默认0}
|
3575 | value={值 number | string, 默认0}
|
3576 | showPercentage={是否显示百分比文字 bool, 默认true} // 若为false则不显示文字
|
3577 |
|
3578 | children={子元素 node, 默认无}
|
3579 |
|
3580 | {...others}
|
3581 | />
|
3582 | ```
|
3583 | ### 示例
|
3584 | ```javascript
|
3585 | import Progress from 'seedsui-react/lib/Progress';
|
3586 |
|
3587 | <Progress percentage={10}/>
|
3588 | ```
|
3589 | [返回目录](#component)
|
3590 |
|
3591 |
|
3592 |
|
3593 |
|
3594 |
|
3595 |
|
3596 |
|
3597 |
|
3598 |
|
3599 |
|
3600 |
|
3601 |
|
3602 | ## PDFView
|
3603 | [PDF文件预览](https://unpkg.com/seedsui-react/src/lib/PDFView/PDFView.js)
|
3604 | ### 属性
|
3605 | ```javascript
|
3606 | <PDFView
|
3607 | src={值 string, 默认''}
|
3608 |
|
3609 | {...others}
|
3610 | />
|
3611 | ```
|
3612 | ### 示例
|
3613 | ```javascript
|
3614 | import PDFView from 'seedsui-react/lib/PDFView';
|
3615 |
|
3616 | <PDFView src="/demo/assets/test.pdf"/>
|
3617 | ```
|
3618 | [返回目录](#component)
|
3619 |
|
3620 |
|
3621 |
|
3622 |
|
3623 |
|
3624 |
|
3625 |
|
3626 |
|
3627 |
|
3628 |
|
3629 |
|
3630 | ## Radio
|
3631 | [单选框](https://unpkg.com/seedsui-react/src/lib/Radio/Radio.js)
|
3632 | ### 属性
|
3633 | ```javascript
|
3634 | <Radio
|
3635 | args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
|
3636 | style={容器style object, 默认无}
|
3637 | className={容器className string, 默认无, 基础'radio-box'}
|
3638 | onClick={点击复选框 func(checked, args)}
|
3639 |
|
3640 | name={复选框name string, 默认无}
|
3641 | value={复选框value string, 默认无}
|
3642 | checked={是否选中 bool, 默认false}
|
3643 | disabled={是否禁用 bool, 默认false}
|
3644 |
|
3645 | caption={复选框标题 string, 默认无}
|
3646 | captionClassName={复选框标题className string, 默认无, 基础'radio-caption'}
|
3647 | captionStyle={复选框标题style object, 默认无}
|
3648 | />
|
3649 | ```
|
3650 | ### 示例
|
3651 | ```javascript
|
3652 | import Radio from 'seedsui-react/lib/Radio';
|
3653 |
|
3654 | onClick = (checked, args) => {
|
3655 | console.log(checked, args)
|
3656 | }
|
3657 |
|
3658 | <Radio onClick={this.onClick}/>
|
3659 | ```
|
3660 | [返回目录](#component)
|
3661 |
|
3662 |
|
3663 |
|
3664 | ## RouteComment
|
3665 | [评价路由](https://unpkg.com/seedsui-react/src/lib/RouteComment/RouteComment.js)
|
3666 | ### 属性
|
3667 | ```javascript
|
3668 | <RouteComment
|
3669 | title={标题 string, 默认'填写意见'}
|
3670 | placeholder={占位符 string, 默认'点击输入'}
|
3671 |
|
3672 | buttons={操作按钮 array, 默认无, 示例如下:}
|
3673 | /*
|
3674 | [{
|
3675 | valid: PropTypes.bool,
|
3676 | caption: PropTypes.node,
|
3677 | style: PropTypes.object,
|
3678 | className: PropTypes.string,
|
3679 | onClick={点击事件 func(value, item, index)}
|
3680 | }]
|
3681 | */
|
3682 | children={子元素 node, 默认无}
|
3683 | />
|
3684 | ```
|
3685 | ### 示例
|
3686 | ```javascript
|
3687 | import {Route, withRouter} from 'react-router';
|
3688 | import RouteComment from 'seedsui-react/lib/RouteComment';
|
3689 |
|
3690 | onClickCancel = (value, item, index) => {
|
3691 | console.log(value, item, index);
|
3692 | }
|
3693 | onClickSubmit = (value, item, index) => {
|
3694 | console.log(value, item, index);
|
3695 | }
|
3696 |
|
3697 | <Route
|
3698 | path={`${this.props.match.path}/approverPop`}
|
3699 | render={() => <RouteComment
|
3700 | buttons={[
|
3701 | {
|
3702 | valid: false,
|
3703 | className: 'lg bg-white',
|
3704 | caption: '取消',
|
3705 | onClick: this.onClickCancel
|
3706 | },
|
3707 | {
|
3708 | valid: false,
|
3709 | className: 'lg primary',
|
3710 | caption: '提交',
|
3711 | onClick: this.onClickSubmit
|
3712 | }
|
3713 | ]}
|
3714 | maxLength="100"
|
3715 | title="审批"
|
3716 | placeholder="请填写审批意见"
|
3717 | />}
|
3718 | />
|
3719 | ```
|
3720 | [返回目录](#component)
|
3721 |
|
3722 |
|
3723 |
|
3724 |
|
3725 | ## SearchBoard
|
3726 | [搜索面板](https://unpkg.com/seedsui-react/src/lib/SearchBoard/SearchBoard.js)
|
3727 | ### 属性
|
3728 | ```javascript
|
3729 | <SearchBoard
|
3730 | style={容器style object, 默认无}
|
3731 | className={容器className string, 默认'border-b', 基础'searchboard'}
|
3732 | dbKey={搜索历史存储到db中的key string, 默认'app_search_history'}
|
3733 | show={*显隐 bool, 默认true}
|
3734 | showValidTags={如果没有历史记录是否隐藏面板 bool, 默认true}
|
3735 | onClick={点击标签 func(item, index), 默认无}
|
3736 | onClear={点击清除 func(), 默认无}
|
3737 | expandCaption={扩展标题 string, 默认无}
|
3738 | expandTags={扩展标签 array, 默认无} // 格式 [{value: 'xx'}]
|
3739 | onClickExpand={点击扩展标签 func(item, index), 默认无}
|
3740 | >
|
3741 | </SearchBoard>
|
3742 | ```
|
3743 | ### 示例
|
3744 | ```javascript
|
3745 | import SearchBoard from 'seedsui-react/lib/SearchBoard';
|
3746 |
|
3747 | this.state = {
|
3748 | searchValue: ''
|
3749 | }
|
3750 |
|
3751 | searchGoods = (value) => {
|
3752 | this.setState({searchValue: value});
|
3753 | if (this.$historySearch) this.$historySearch.add({key: value, value: value});
|
3754 | // 加载数据
|
3755 | }
|
3756 |
|
3757 | <div className="flex flex-middle" style={style}>
|
3758 | <form className="flex flex-middle flex-1" onSubmit={this.searchGoods}>
|
3759 | <i className="icon icon-search size20 color-sub"></i>
|
3760 | <input type="search" ref={input => this.searchInput = input} className="searchbar-input" placeholder="商品名称/单据编号"/>
|
3761 | <i className="icon icon-rdo-close-fill size16 color-sub" onClick={this.onClear}></i>
|
3762 | </form>
|
3763 | <div style={{display: 'block', fontSize: '15px', lineHeight: '30px', paddingLeft: '10px'}} onClick={this.onClickCancel}>取消</div>
|
3764 | </div>
|
3765 |
|
3766 | <SearchBoard
|
3767 | show={goods.length === 0 && !this.state.searchValue}
|
3768 | ref={(el) => {this.$historySearch = el;}}
|
3769 | dbKey="app_history_search_goods"
|
3770 | onClick={(item) => {this.searchGoods(item.value)}}
|
3771 | />
|
3772 | ```
|
3773 | [返回目录](#component)
|
3774 |
|
3775 |
|
3776 |
|
3777 | ## SelectPicker
|
3778 | [选择弹框](https://unpkg.com/seedsui-react/src/lib/SelectPicker/SelectPicker.js)
|
3779 | ### 属性
|
3780 | ```javascript
|
3781 | <SelectPicker
|
3782 | portal={传送dom object, 默认document.getElementById('root')}
|
3783 | multiple={是否允许多选 bool, 默认false}
|
3784 | value={值 number | string, 默认无}
|
3785 | valueForKey={选中key number | string, 默认无}
|
3786 | list={选择列表 array, 默认无} // 格式 [key: 'xx', value: 'xx']
|
3787 |
|
3788 | maskStyle={遮罩style object, 默认无}
|
3789 | maskClassName={遮罩className string, 默认无, 基础'mask popover-mask'}
|
3790 | className={容器className string, 默认无, 基础'selectpicker'}
|
3791 | style={容器style object, 默认无}
|
3792 | slotClassName={一槽className string, 默认'text-center'}
|
3793 | show={*显隐 bool, 默认false}
|
3794 | onClickMask={点击遮罩 func(e), 默认无}
|
3795 | onClickCancel={点击取消按钮 func(e), 默认无}
|
3796 | onClickSubmit={点击确定按钮 func(selected), 默认无}
|
3797 | />
|
3798 | ```
|
3799 | ### 示例
|
3800 | ```javascript
|
3801 | import SelectPicker from 'seedsui-react/lib/SelectPicker';
|
3802 |
|
3803 | onClickSubmit = (e) => {
|
3804 | const value = e.activeOptions[0].value;
|
3805 | console.log(value);
|
3806 | this.setState({
|
3807 | show: !this.state.show
|
3808 | });
|
3809 | }
|
3810 | onClickCancel = () => {
|
3811 | this.setState({
|
3812 | show: !this.state.show
|
3813 | });
|
3814 | }
|
3815 | onClickMask = () => {
|
3816 | this.setState({
|
3817 | show: !this.state.show
|
3818 | });
|
3819 | }
|
3820 |
|
3821 | <SelectPicker
|
3822 | value=""
|
3823 | show={this.state.show}
|
3824 | onClickSubmit={this.onClickSubmit}
|
3825 | onClickCancel={this.onClickCancel}
|
3826 | onClickMask={this.onClickMask}
|
3827 | />
|
3828 | ```
|
3829 | [返回目录](#component)
|
3830 |
|
3831 |
|
3832 |
|
3833 |
|
3834 | ## Star
|
3835 | [小竖条](https://unpkg.com/seedsui-react/src/lib/Star/Star.js)
|
3836 | ### 属性
|
3837 | ```javascript
|
3838 | <Star
|
3839 | className={图标className string, 默认无, 基础'star'}
|
3840 | onClick={点击 func(args), 默认无}
|
3841 | {...others}
|
3842 | />
|
3843 | ```
|
3844 | ### 示例
|
3845 | ```javascript
|
3846 | import Star from 'seedsui-react/lib/Star';
|
3847 |
|
3848 | <Star/>
|
3849 | ```
|
3850 | [返回目录](#component)
|
3851 |
|
3852 |
|
3853 |
|
3854 |
|
3855 | ## Stencil
|
3856 | [加载模板](https://unpkg.com/seedsui-react/src/lib/Stencil/Stencil.js)
|
3857 | ### 属性
|
3858 | ```javascript
|
3859 | <Stencil
|
3860 | className={图标className string, 默认'stencil-list', 基础'stencil'}
|
3861 | {...others}
|
3862 | />
|
3863 | ```
|
3864 | ### 示例
|
3865 | ```javascript
|
3866 | import Stencil from 'seedsui-react/lib/Stencil';
|
3867 |
|
3868 | <Stencil/>
|
3869 | ```
|
3870 | [返回目录](#component)
|
3871 |
|
3872 |
|
3873 |
|
3874 |
|
3875 | ## Sticker
|
3876 | [标签贴](https://unpkg.com/seedsui-react/src/lib/Sticker/Sticker.js)
|
3877 | ### 属性
|
3878 | ```javascript
|
3879 | <Sticker
|
3880 | type={类型 string, 默认无} // 默认className加上'sticker', type设置为line时,className加上'sticker-line'
|
3881 | iconClassName={图标className string, 默认无, 基础'size12'}
|
3882 | className={容器className string, 默认'top right', 基础'size12'} // 'top | bottom | right | left'
|
3883 | style={容器style object, 默认无}
|
3884 | >
|
3885 | </Sticker>
|
3886 | ```
|
3887 | ### 示例
|
3888 | ```javascript
|
3889 | import Sticker from 'seedsui-react/lib/Sticker';
|
3890 |
|
3891 | <Sticker>NEW</Sticker>
|
3892 | ```
|
3893 | [返回目录](#component)
|
3894 |
|
3895 |
|
3896 |
|
3897 |
|
3898 | ## Tabbar
|
3899 | [页签](https://unpkg.com/seedsui-react/src/lib/Tabbar/Tabbar.js)
|
3900 | ### 属性
|
3901 | ```javascript
|
3902 | <Tabbar
|
3903 | style={容器style object, 默认无}
|
3904 | className={容器className string, 默认'tabbar-line tabbar-line-width70 border-b'}
|
3905 | // tabbar-line | tabbar-rect | tabbar-lump | tabbar-dropdown | tabbar-footer
|
3906 | captionClassName={标题className string, 默认无, 基础'tab-caption'}
|
3907 | captionStyle={标题style object, 默认无}
|
3908 | sndCaptionClassName={副标题className string, 默认无, 基础'tab-sndcaption'}
|
3909 | sndCaptionStyle={副标题style object, 默认无}
|
3910 | list={列表 array, 默认无, 格式如下:}
|
3911 | // [
|
3912 | // {
|
3913 | // icon: node,
|
3914 | // iconActive: node,
|
3915 | // ricon: node,
|
3916 | // riconActive: node,
|
3917 |
|
3918 | // name: string, // 与caption完全相同, 允许传入name或者caption
|
3919 | // caption: string,
|
3920 | // sndcaption: string,
|
3921 | // active: bool,
|
3922 |
|
3923 | // attributes: object // tab属性
|
3924 | // style: object
|
3925 | // }
|
3926 | // ]
|
3927 | tiled={宽度等分 bool, 默认宽度弹性伸缩}
|
3928 | disabled={是否禁用 bool, 默认无}
|
3929 | exceptOnClickActive={排除点击选中的菜单 bool, 默认true}
|
3930 | onClick={点击页签 func(e, item, index), 默认无}
|
3931 | activeIndex={选中项 number, 默认0}
|
3932 | />
|
3933 | ```
|
3934 | ### 示例
|
3935 | ```javascript
|
3936 | import Tabbar from 'seedsui-react/lib/Tabbar';
|
3937 |
|
3938 | const tabbar = [
|
3939 | {caption: '月', dateType: '0'},
|
3940 | {caption: '季', dateType: '1'},
|
3941 | {caption: '年', dateType: '2'}
|
3942 | ];
|
3943 | const tabActiveIndex = 0;
|
3944 |
|
3945 | onClickTab = (item, index) => {
|
3946 | console.log(item, index)
|
3947 | }
|
3948 |
|
3949 | <Tabbar list={tabbar} activeIndex={tabActiveIndex} onClick={this.onClickTab}/>
|
3950 | ```
|
3951 | [返回目录](#component)
|
3952 |
|
3953 |
|
3954 |
|
3955 |
|
3956 | ## Ticket
|
3957 | [票券]](https://unpkg.com/seedsui-react/src/lib/Ticket/Ticket.js)
|
3958 | ### 属性
|
3959 | ```javascript
|
3960 | <Ticket
|
3961 | style={容器style object, 默认无}
|
3962 | className={左侧容器className string, 默认无, 基础'ticket'}
|
3963 | legendStyle={左侧容器style object, 默认无}
|
3964 | legendClassName={左侧容器className string, 默认无, 基础'ticket-legend'}
|
3965 | legend={左侧容器 node, 默认无}
|
3966 | containerStyle={左侧容器style object, 默认无}
|
3967 | containerClassName={内容className string, 默认无, 基础'ticket-container'}
|
3968 | onClick={点击页签 func(e), 默认无}
|
3969 | {...others}
|
3970 | />
|
3971 | ```
|
3972 | ### 示例
|
3973 | ```javascript
|
3974 | import Ticket from 'seedsui-react/lib/Ticket';
|
3975 |
|
3976 | <Ticket onClick={this.onClick} className={disabled ? 'disabled' : ''} style={{margin: '12px 14px'}} legend={
|
3977 | <div className="text-center">
|
3978 | <p style={{fontSize: '20px'}}>{item.num}{item.input_unit_name}</p>
|
3979 | <p style={{fontSize: '12px', marginTop: '4px'}}>满30元可用</p>
|
3980 | </div>
|
3981 | }
|
3982 | containerStyle={{padding: '12px'}}>
|
3983 | <div className="flex flex-top" style={{height: '60px'}}>
|
3984 | <p className="list-caption nowrap2 flex-1" style={{height: '40px'}}>商品名称 规格</p>
|
3985 | </div>
|
3986 | <div className="flex">
|
3987 | <p className="list-sndcaption font-size-sm flex-1">2017-07-07</p>
|
3988 | <Price price={item.amount} unit="元" className="normal color-primary"/>
|
3989 | </div>
|
3990 | </Ticket>
|
3991 | ```
|
3992 | [返回目录](#component)
|
3993 |
|
3994 |
|
3995 |
|
3996 |
|
3997 | ## Timeline
|
3998 | [时间轴](https://unpkg.com/seedsui-react/src/lib/Timeline/Timeline.js)
|
3999 | ### 属性
|
4000 | ```javascript
|
4001 | <Timeline
|
4002 | list={列表 array, 默认无, 格式如下:}
|
4003 | // [{content: node, icon: node(默认Dot), active: bool, children: node}]
|
4004 | className={容器className string, 默认无, 基础'timeline'}
|
4005 | style={容器style object, 默认无}
|
4006 |
|
4007 | lineParams={div左线条属性 object, 默认无, 基础{className: 'timeline-line'}}
|
4008 |
|
4009 | badgeParams={div左小球的容器 object, 默认无, 基础{className: 'timeline-badge'}}
|
4010 |
|
4011 | dotParams={Dot组件小球属性 object, 默认{className: ''}}
|
4012 |
|
4013 | {...others}
|
4014 | />
|
4015 | ```
|
4016 | ### 示例
|
4017 | ```javascript
|
4018 | import Timeline from 'seedsui-react/lib/Timeline';
|
4019 |
|
4020 | const timeList = [
|
4021 | {content: <p>内容</p>, active: true}
|
4022 | ]
|
4023 | <Timeline list={timeList} style={{padding: '0 0 0 18px'}}/>
|
4024 | ```
|
4025 | [返回目录](#component)
|
4026 |
|
4027 |
|
4028 |
|
4029 |
|
4030 | ## Timepart
|
4031 | [时间段](https://unpkg.com/seedsui-react/src/lib/Timepart/Timepart.js)
|
4032 | ### 属性
|
4033 | ```javascript
|
4034 | <Timepart
|
4035 | multiple={是否允许多选 bool, 默认false}
|
4036 | style={容器style object, 默认无}
|
4037 | className={容器className string, 默认无, 基础'timepart'}
|
4038 |
|
4039 | startTime={开始时间 string, 默认'07:00'}
|
4040 | endTime={结束时间 string, 默认'22:00'}
|
4041 | times={设置时间段 array, 默认无}
|
4042 | // [{className: string, startTime: 'hh:ss', endTime: 'hh:ss', data: string, cover: bool}], 其中cover指允许覆盖显示
|
4043 |
|
4044 | onChange={选中发生变化 func(times:array), 默认无}
|
4045 | onError={发生冲突错误 func({msg:''}), 默认无}
|
4046 | />
|
4047 | ```
|
4048 | ### 示例
|
4049 | ```javascript
|
4050 | import Timepart from 'seedsui-react/lib/Timepart';
|
4051 |
|
4052 | <Timepart times={[{className: 'disabled', startTime: '09:00', endTime: '10:00'}]}/>
|
4053 | ```
|
4054 | [返回目录](#component)
|
4055 |
|
4056 |
|
4057 |
|
4058 |
|
4059 | ## Titlebar
|
4060 | [标题栏](https://unpkg.com/seedsui-react/src/lib/Titlebar/Titlebar.js)
|
4061 | ### 属性
|
4062 | ```javascript
|
4063 | <Titlebar
|
4064 | className={容器className string, 默认无, 基础'titlebar'}
|
4065 |
|
4066 | showUrlTitle={标题是否显示url中的title bool, 默认true, 将会读取url中'titlebar'参数做为标准}
|
4067 | caption={标题 node, 默认无}
|
4068 | // 以下三个属性, 只有caption为string类型或者显示地址栏标题时才有用
|
4069 | captionClassName={标题className string, 默认无, 基础'titlebar-caption nowrap text-center'}
|
4070 | captionStyle={标题style object, 默认无}
|
4071 | onClickCaption={点击标题 func(e), 默认无}
|
4072 |
|
4073 | lButtons={左按钮 array, 默认['$back']}
|
4074 | // '$back' 等同于{iconClassName: 'shape-arrow-left', onClick: this.onClickBack}
|
4075 | // 格式 [{className: string, style: object, iconClassName: string, icon: node, caption: string}]
|
4076 |
|
4077 | rButtons={右按钮 array, 默认无}
|
4078 | backClassName={返回按钮className string, 默认无}
|
4079 | backStyle={返回按钮style object, 默认无}
|
4080 | backIcon={返回按钮图标 node, 默认无}
|
4081 | backIconClassName={返回按钮图标className string, 默认无}
|
4082 | backIconStyle={返回按钮图标style object, 默认无}
|
4083 | backCaption={返回按钮标题 string, 默认无}
|
4084 | onClickBack={点击标题 func(), 默认无} // 当设置onClickBack后, 默认的onClickBack事件将被代替
|
4085 | >
|
4086 | 如果此处写了内容, 将代替caption
|
4087 | </Titlebar>
|
4088 | ```
|
4089 | ### 示例
|
4090 | ```javascript
|
4091 | import Timepart from 'seedsui-react/lib/Timepart';
|
4092 |
|
4093 | <Titlebar caption="SeedsUI" rButtons={[{ caption: 'try' , onClick: () => {console.log(1)}}]} />
|
4094 | ```
|
4095 | [返回目录](#component)
|
4096 |
|
4097 |
|
4098 |
|
4099 |
|
4100 | ## Toast
|
4101 | [提示弹框](https://unpkg.com/seedsui-react/src/lib/Toast/Toast.js)
|
4102 | ### 建议
|
4103 | Toast组件更适用于复杂的定制弹框,一般弹框建议直接使用Api直接调用:
|
4104 | * Bridge.showToast(msg, {mask: false})代替
|
4105 |
|
4106 | 详见[Bridge 桥接库](#bridge) 桥接库
|
4107 | ### 属性
|
4108 | ```javascript
|
4109 | <Toast
|
4110 | portal={传送dom object, 默认document.getElementById('root')}
|
4111 | show={*显隐 bool, 默认false}
|
4112 |
|
4113 | duration={动画时长 number, 默认false}
|
4114 |
|
4115 | maskClassName={遮罩className string, 默认无, 基础'mask toast-mask'}
|
4116 | maskStyle={遮罩style object, 默认无}
|
4117 |
|
4118 | className={弹框className string, 默认无, 基础'toast'}
|
4119 | style={弹框style object, 默认无}
|
4120 |
|
4121 | caption={消息 node, 默认无}
|
4122 | captionStyle={消息style object, 默认无}
|
4123 | captionClassName={消息className string, 默认无, 基础'toast-caption'}
|
4124 |
|
4125 | icon={图标dom node, 默认无}
|
4126 | />
|
4127 | ```
|
4128 | ### 示例
|
4129 | ```javascript
|
4130 | import Toast from 'seedsui-react/lib/Toast';
|
4131 |
|
4132 | this.state = {
|
4133 | toastShow: false,
|
4134 | toastMsg: '',
|
4135 | }
|
4136 |
|
4137 | showMsg = (msg) => {
|
4138 | if (this.timeout) window.clearTimeout(this.timeout);
|
4139 | this.setState({
|
4140 | toastShow: true,
|
4141 | toastMsg: msg
|
4142 | });
|
4143 | this.timeout = setTimeout(() => {
|
4144 | this.setState({
|
4145 | toastShow: false
|
4146 | });
|
4147 | }, 2000);
|
4148 | }
|
4149 |
|
4150 | <Toast caption={this.state.toastMsg} show={this.state.toastShow} className="middle" style={{borderRadius: '4px'}}/>
|
4151 | ```
|
4152 | [返回目录](#component)
|
4153 |
|
4154 |
|
4155 |
|
4156 |
|
4157 | ## Tree
|
4158 | [树结构](https://unpkg.com/seedsui-react/src/lib/Tree/Tree.js)
|
4159 | ### 属性
|
4160 | ```javascript
|
4161 | <Tree
|
4162 | // 容器
|
4163 | style={树容器style object, 默认无}
|
4164 | className={树容器className string, 默认无, 基础'tree-box'}
|
4165 | // 树
|
4166 | treeStyle={树style object, 默认无}
|
4167 | treeClassName={树className string, 默认无, 基础'tree'}
|
4168 |
|
4169 | multiple={是否需要多选 bool, 默认true} // 只有设置checkbox为true才生效
|
4170 | checkbox={是否支持选择 bool, 默认无}
|
4171 | bar={选中项聚合展现栏 string | node, 默认无}
|
4172 | selected={选中项 array, 默认无} // 格式 [{id: '', name: '', parentid: ''}]
|
4173 | list={列表项 array, 默认无} // [{id: '', name: '', parentid: ''}]
|
4174 |
|
4175 | buttonAddHTML={添加按钮 string, 默认无}
|
4176 | buttonAddClassName={添加按钮className string, 默认无}
|
4177 | buttonAddSrc={添加按钮src string, 默认无}
|
4178 | onClickAdd={点击添加按钮 func({id:'', name: '', parentid: ''}, s), 默认无}
|
4179 |
|
4180 | buttonDelHTML={添加按钮 string, 默认无}
|
4181 | buttonDelClassName={添加按钮className string, 默认无}
|
4182 | buttonDelSrc={添加按钮src string, 默认无}
|
4183 | onClickDel={点击添加按钮 func({id:'', name: '', parentid: ''}, s), 默认无}
|
4184 |
|
4185 | onClickLastChild={点击底层节点 func(s), 默认无}
|
4186 |
|
4187 | onClick={点击节点 func(e, item, isActived, isExtand, childrenCount), 默认无}
|
4188 | onData={数据加载时,可修改dom func(option), 默认无}
|
4189 | />
|
4190 | ```
|
4191 | ### 示例
|
4192 | ```javascript
|
4193 | import Tree from 'seedsui-react/lib/Tree';
|
4194 |
|
4195 | const groupList = [
|
4196 | {
|
4197 | "id": "97666a35-778e-4d28-a973-df7144fe5887",
|
4198 | "name": "开发二部一室",
|
4199 | "parentid": "3fbb06c3-6ac5-4a19-9252-898818da5c30",
|
4200 | },
|
4201 | {
|
4202 | "id": "93fe4fa2-e75e-4e98-833d-7cdecdf2e3f9",
|
4203 | "name": "开发一部",
|
4204 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4205 | },
|
4206 | {
|
4207 | "id": "afb6ae14-5d23-4117-b819-cc7e705e8ddb",
|
4208 | "name": "开发一部一室",
|
4209 | "parentid": "93fe4fa2-e75e-4e98-833d-7cdecdf2e3f9",
|
4210 | },
|
4211 | {
|
4212 | "id": "3fbb06c3-6ac5-4a19-9252-898818da5c30",
|
4213 | "name": "开发二部",
|
4214 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4215 | },
|
4216 | {
|
4217 | "id": "bd8b7116-e5ae-4813-b2a7-a38f56ce10d1",
|
4218 | "name": "开发二部二室",
|
4219 | "parentid": "3fbb06c3-6ac5-4a19-9252-898818da5c30",
|
4220 | },
|
4221 | {
|
4222 | "id": "7eb397f6-daed-41f9-8985-ac2c2129ef9b",
|
4223 | "name": "开发一部二室",
|
4224 | "parentid": "93fe4fa2-e75e-4e98-833d-7cdecdf2e3f9",
|
4225 | },
|
4226 | {
|
4227 | "id": "87154769-0d80-4459-a0cb-df68b26e4011",
|
4228 | "name": "开发二部三室",
|
4229 | "parentid": "3fbb06c3-6ac5-4a19-9252-898818da5c30",
|
4230 | },
|
4231 | {
|
4232 | "id": "380e2247-1179-40e2-91e1-8851dd5f24ef",
|
4233 | "name": "开发三部",
|
4234 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4235 | },
|
4236 | {
|
4237 | "id": "41eddac1-e560-47c9-8ea0-c39838e93bb5",
|
4238 | "name": "开发一部三室",
|
4239 | "parentid": "93fe4fa2-e75e-4e98-833d-7cdecdf2e3f9",
|
4240 | },
|
4241 | {
|
4242 | "id": "56a81fea-03f4-41e1-a521-ea14513a65c6",
|
4243 | "name": "业务产品部",
|
4244 | "parentid": "-1",
|
4245 | },
|
4246 | {
|
4247 | "id": "dbc1599b-41a1-49bb-8230-a230e0927016",
|
4248 | "name": "UED部",
|
4249 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4250 | },
|
4251 | {
|
4252 | "id": "abd197f0-1ce5-4e42-a6b0-063cf22633d2",
|
4253 | "name": "测试部",
|
4254 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4255 | },
|
4256 | {
|
4257 | "id": "0a9ba2be-94d8-4163-85d2-940ccbf5ede1",
|
4258 | "name": "广州开发部",
|
4259 | "parentid": "0b189355-76f5-430d-bcdc-ccce65880021",
|
4260 | },
|
4261 | {
|
4262 | "id": "0a9ba2be-94d8-4163-468i-940ccbf5ede1",
|
4263 | "name": "广州开发部一室",
|
4264 | "parentid": "0a9ba2be-94d8-4163-85d2-940ccbf5ede1",
|
4265 | },
|
4266 | {
|
4267 | "id": "0d736fce-5f4a-4603-acc2-1ed4d3f4a578",
|
4268 | "name": "运营支撑部",
|
4269 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4270 | },
|
4271 | {
|
4272 | "id": "c6e56510-c293-48bc-ac8e-bfa3a1926417",
|
4273 | "name": "办公室",
|
4274 | "parentid": "-1",
|
4275 | },
|
4276 | {
|
4277 | "id": "483d-94d8-4163-85d2-940ccbf5ede1",
|
4278 | "name": "办公室1",
|
4279 | "parentid": "c6e56510-c293-48bc-ac8e-bfa3a1926417",
|
4280 | },
|
4281 | {
|
4282 | "id": "693a-5f4a-4603-acc2-1ed4d3f4a578",
|
4283 | "name": "办公室1-1",
|
4284 | "parentid": "483d-94d8-4163-85d2-940ccbf5ede1",
|
4285 | },
|
4286 | {
|
4287 | "id": "f83fe35c-a93e-4332-a3a4-8c16b7b9e4db",
|
4288 | "name": "财务部",
|
4289 | "parentid": "-1",
|
4290 | },
|
4291 | {
|
4292 | "id": "e58f452e-a3d4-4eff-9f00-fbcf57342267",
|
4293 | "name": "残酷吗?VC的筛选法则:看100个案子投1个",
|
4294 | "parentid": "7576b7b4-1e15-4b09-8d4c-47ca7edb36fe",
|
4295 | },
|
4296 | {
|
4297 | "id": "ed991ebb-872b-4943-838d-41e51d145cf4",
|
4298 | "name": "测试二室",
|
4299 | "parentid": "abd197f0-1ce5-4e42-a6b0-063cf22633d2",
|
4300 | },
|
4301 | {
|
4302 | "id": "c74b5302-1293-4087-a684-04104e7da402",
|
4303 | "name": "测试三室",
|
4304 | "parentid": "abd197f0-1ce5-4e42-a6b0-063cf22633d2",
|
4305 | },
|
4306 | {
|
4307 | "id": "8144c2fa-a39b-4959-8251-3327a683df4c",
|
4308 | "name": "测试一室",
|
4309 | "parentid": "abd197f0-1ce5-4e42-a6b0-063cf22633d2",
|
4310 | },
|
4311 | {
|
4312 | "id": "2b33aea3-3745-4ed3-9457-5494aee5e344",
|
4313 | "name": "工程及运维部",
|
4314 | "parentid": "0b189355-76f5-430d-bcdc-ccce65880021",
|
4315 | },
|
4316 | {
|
4317 | "id": "728fd935-fb28-4154-8e3f-74ca29a2460f",
|
4318 | "name": "集成开发二部",
|
4319 | "parentid": "0b189355-76f5-430d-bcdc-ccce65880021",
|
4320 | },
|
4321 | {
|
4322 | "id": "a6781fb8-9968-4134-8fd0-564821ea7058",
|
4323 | "name": "集成开发一部",
|
4324 | "parentid": "0b189355-76f5-430d-bcdc-ccce65880021",
|
4325 | },
|
4326 | {
|
4327 | "id": "13ed5bf3-1b91-4fca-9303-ee8071b32154",
|
4328 | "name": "内勤组",
|
4329 | "parentid": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4330 | },
|
4331 | {
|
4332 | "id": "47f9b708-ab98-4fb3-a643-217db2074c73",
|
4333 | "name": "人力资源部",
|
4334 | "parentid": "-1",
|
4335 | },
|
4336 | {
|
4337 | "id": "a87d375e-61ba-470a-914c-30eb94e21adf",
|
4338 | "name": "市场北京办",
|
4339 | "parentid": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4340 | },
|
4341 | {
|
4342 | "id": "d0d02e37-114c-4446-b870-06e99f9e1394",
|
4343 | "name": "市场广州办",
|
4344 | "parentid": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4345 | },
|
4346 | {
|
4347 | "id": "90fea6c9-0f66-45b0-a3c1-bb209beac12e",
|
4348 | "name": "市场南京办",
|
4349 | "parentid": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4350 | },
|
4351 | {
|
4352 | "id": "0a39cee5-a280-45c7-a41e-1998855e3ef1",
|
4353 | "name": "市场上海办",
|
4354 | "parentid": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4355 | },
|
4356 | {
|
4357 | "id": "221b9674-ac71-45ba-81f1-4b4be1df4314",
|
4358 | "name": "市场武汉办",
|
4359 | "parentid": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4360 | },
|
4361 | {
|
4362 | "id": "ce1ebf90-9540-41d4-9b79-c30441913ad2",
|
4363 | "name": "市场支持",
|
4364 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4365 | },
|
4366 | {
|
4367 | "id": "7576b7b4-1e15-4b09-8d4c-47ca7edb36fe",
|
4368 | "name": "微软宣布新一轮裁员或影响1000人",
|
4369 | "parentid": "97666a35-778e-4d28-a973-df7144fe5887",
|
4370 | },
|
4371 | {
|
4372 | "id": "3e12ef76-9235-48c5-bff8-27fbd56111cb",
|
4373 | "name": "项目管理部",
|
4374 | "parentid": "-1",
|
4375 | },
|
4376 | {
|
4377 | "id": "b93d94c6-7e30-4caf-89eb-188bef40b3ba",
|
4378 | "name": "销售二部",
|
4379 | "parentid": "56a81fea-03f4-41e1-a521-ea14513a65c6",
|
4380 | },
|
4381 | {
|
4382 | "id": "99bc0450-4e64-42e6-99cb-2c5686a4c0b3",
|
4383 | "name": "系统集成部",
|
4384 | "parentid": "56a81fea-03f4-41e1-a521-ea14513a65c6",
|
4385 | },
|
4386 | {
|
4387 | "id": "96a2835b-a1b2-4556-bf68-cb0038042b57",
|
4388 | "name": "移动平台产品线",
|
4389 | "parentid": "56a81fea-03f4-41e1-a521-ea14513a65c6",
|
4390 | },
|
4391 | {
|
4392 | "id": "0b189355-76f5-430d-bcdc-ccce65880021",
|
4393 | "name": "应用交付产品线",
|
4394 | "parentid": "56a81fea-03f4-41e1-a521-ea14513a65c6",
|
4395 | },
|
4396 | {
|
4397 | "id": "d3a6be54-30f0-4e82-8083-a7ed8456d03d",
|
4398 | "name": "运营体系",
|
4399 | "parentid": "-1",
|
4400 | },
|
4401 | {
|
4402 | "id": "6bb5a527-5800-4583-a749-bbb53e639d52",
|
4403 | "name": "支撑二室",
|
4404 | "parentid": "0d736fce-5f4a-4603-acc2-1ed4d3f4a578",
|
4405 | },
|
4406 | {
|
4407 | "id": "abdab8ba-7a99-462e-b022-56c69b3ae4fd",
|
4408 | "name": "支撑一室",
|
4409 | "parentid": "0d736fce-5f4a-4603-acc2-1ed4d3f4a578",
|
4410 | },
|
4411 | {
|
4412 | "id": "8ff29a2a-0960-4bd7-81be-0e4a649ba701",
|
4413 | "name": "未分组部门",
|
4414 | "parentid": "-1",
|
4415 | }
|
4416 | ];
|
4417 | var userList1 = [
|
4418 | {
|
4419 | isPeople: true,
|
4420 | "id": "xiali",
|
4421 | "name": "夏立",
|
4422 | "parentid": "56a81fea-03f4-41e1-a521-ea14513a65c6",
|
4423 | },
|
4424 | {
|
4425 | isPeople: true,
|
4426 | "id": "liuyu",
|
4427 | "name": "刘宇",
|
4428 | "parentid": "56a81fea-03f4-41e1-a521-ea14513a65c6"
|
4429 | }
|
4430 | ];
|
4431 | var userList2 = [
|
4432 | {
|
4433 | isPeople: true,
|
4434 | "id": "liguanghui",
|
4435 | "name": "李广辉",
|
4436 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57"
|
4437 | },
|
4438 | {
|
4439 | isPeople: true,
|
4440 | "id": "xuguolong",
|
4441 | "name": "徐国龙",
|
4442 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57"
|
4443 | },
|
4444 | {
|
4445 | isPeople: true,
|
4446 | "id": "zhujingjing",
|
4447 | "name": "朱晶晶",
|
4448 | "parentid": "96a2835b-a1b2-4556-bf68-cb0038042b57"
|
4449 | }
|
4450 | ];
|
4451 |
|
4452 | // 展开全部
|
4453 | onExtend = () => {
|
4454 | this.$tree.instance.extendAll();
|
4455 | }
|
4456 | // 展开全部
|
4457 | onCollapse = () => {
|
4458 | this.$tree.instance.collapseAll();
|
4459 | }
|
4460 | // 异步加载的方法, 点击Title, 去请求数据
|
4461 | onAsync = (e, item, isActived, isExtend, childrenCount) => {
|
4462 | if (!isExtend || e.targetLine.hasData) return;
|
4463 | var ul = e.targetLine.nextElementSibling;
|
4464 | if (item.id === "56a81fea-03f4-41e1-a521-ea14513a65c6") { // 加载业务产品部
|
4465 | console.log('加载业务产品部');
|
4466 | this.$tree.instance.addData(userList1, item.id, ul);
|
4467 | e.targetLine.hasData = true;
|
4468 | }
|
4469 | if (item.id === "96a2835b-a1b2-4556-bf68-cb0038042b57") { // 加载移动平台产品线
|
4470 | console.log('加载移动平台产品线');
|
4471 | this.$tree.instance.addData(userList2, item.id, ul);
|
4472 | e.targetLine.hasData = true;
|
4473 | }
|
4474 | }
|
4475 | // 添加数据时, 可手动修改它的样式
|
4476 | onData = (option) => {
|
4477 | if (option.isPeople) {
|
4478 | var photo = "";
|
4479 | if (option.avatarUrl) {
|
4480 | photo = '<span class="tree-avatar" style="background-image:url(' + option.avatarUrl + ')"></span>';
|
4481 | } else {
|
4482 | // photo = '<span class="tree-avatar" style="background-color:' + option.name.substr(0, 1).toPinyin().substr(0, 1).toColor() + '">' + option.name.substr(option.name.length - 2, 2) + '</span>';
|
4483 | photo = '<span class="tree-avatar">' + option.name.substr(option.name.length - 2, 2) + '</span>';
|
4484 | }
|
4485 | option.html = '<div class="tree-icon">' + photo + '</div>' +
|
4486 | '<div class="tree-title">' + option.name + '</div>';
|
4487 | }
|
4488 | }
|
4489 | // 查看选中信息
|
4490 | onSubmit = () => {
|
4491 | let selected = this.$tree.instance.selected;
|
4492 | console.log(selected);
|
4493 | }
|
4494 |
|
4495 | <div id="idTreeBar" className="tree-bar"></div>
|
4496 | <Tree
|
4497 | ref={(el) => {this.$tree = el}}
|
4498 | list={groupList}
|
4499 | multiple={false}
|
4500 | checkbox
|
4501 | onClick={this.onAsync}
|
4502 | onData={this.onData}
|
4503 | selected={[{id: '56a81fea-03f4-41e1-a521-ea14513a65c6', name: '业务产品部', parentid: '-1'}]}
|
4504 | bar="#idTreeBar"
|
4505 | />
|
4506 | <input type="button" className="button lg" value="查看选中" onClick={this.onSubmit}/>
|
4507 | <input type="button" className="button lg" value="展开全部" onClick={this.onExtend}/>
|
4508 | <input type="button" className="button lg" value="收缩全部" onClick={this.onCollapse}/>
|
4509 | ```
|
4510 | [返回目录](#component)
|
4511 |
|
4512 |
|
4513 |
|
4514 |
|
4515 |
|
4516 |
|
4517 |
|
4518 |
|
4519 |
|
4520 |
|
4521 |
|
4522 |
|
4523 |
|
4524 |
|
4525 |
|
4526 | ## MapUtil
|
4527 | [地图工具](https://unpkg.com/seedsui-react/src/lib/MapUtil/BaiduMap.js)
|
4528 | ### 方法
|
4529 |
|
4530 | ### 示例
|
4531 | ```javascript
|
4532 | import MapUtil from './../lib/MapUtil';
|
4533 | import GeoUtil from './../lib/GeoUtil.js';
|
4534 | var greinerHormann = require('polygon-clipping');
|
4535 |
|
4536 |
|
4537 | const MapContainer = styled.div`
|
4538 | position: absolute;
|
4539 | top: 0;
|
4540 | left: 0;
|
4541 | right: 0;
|
4542 | bottom: 0;
|
4543 | `
|
4544 |
|
4545 | const ButtonDraw = styled.div`
|
4546 | position: absolute;
|
4547 | width: 92px;
|
4548 | height: 32px;
|
4549 | line-height: 32px;
|
4550 | top: 20px;
|
4551 | right: 20px;
|
4552 | z-index: 1;
|
4553 | border-radius: 2px;
|
4554 | text-align: center;
|
4555 | box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
|
4556 | cursor: pointer;
|
4557 | background: #fff;
|
4558 | `
|
4559 |
|
4560 | const redMapStyle = {
|
4561 | strokeColor: '#f53e2d',
|
4562 | strokeWeight: 1,
|
4563 | strokeOpacity: 0.8,
|
4564 | strokeStyle: 'solid',
|
4565 | fillColor: '#f53e2d',
|
4566 | fillOpacity: 0.6
|
4567 | }
|
4568 |
|
4569 | var redMap = {}
|
4570 | var blueMap = {}
|
4571 |
|
4572 |
|
4573 |
|
4574 | componentDidMount () {
|
4575 | Bridge.debug = true
|
4576 | this.mapUtil = new MapUtil('map');
|
4577 | this.initMap();
|
4578 | }
|
4579 |
|
4580 | // 添加鼠标绘制工具监听事件,用于获取绘制结果
|
4581 | initMap = () => {
|
4582 | if (this.mapUtil && this.mapUtil.drawingManager) {
|
4583 | this.mapUtil.showScale();
|
4584 | this.mapUtil.showNavigation();
|
4585 | this.mapUtil.drawingManager.addEventListener('overlaycomplete', this.drawBlue);
|
4586 | this.drawRed();
|
4587 | }
|
4588 | }
|
4589 | // 绘制总区域
|
4590 | drawRed = () => {
|
4591 | this.mapUtil.drawBoundary({
|
4592 | area: '江苏省南京市',
|
4593 | styleOptions: redMapStyle,
|
4594 | onSuccess: (res) => {
|
4595 | redMap['red-nanjing'] = res.polygons;
|
4596 | this.mapUtil.map.setViewport(res.polygonsPath);
|
4597 | },
|
4598 | onError: (msg) => {
|
4599 | alert(msg)
|
4600 | }
|
4601 | });
|
4602 | this.mapUtil.drawBoundary({
|
4603 | area: '江苏省镇江市',
|
4604 | styleOptions: redMapStyle,
|
4605 | onSuccess: (res) => {
|
4606 | redMap['red-zhengjiang'] = res.polygons;
|
4607 | this.mapUtil.map.setViewport(res.polygonsPath);
|
4608 | },
|
4609 | onError: (msg) => {
|
4610 | alert(msg)
|
4611 | }
|
4612 | });
|
4613 | }
|
4614 | // 手动绘制可选区域
|
4615 | drawBlue = (e) => {
|
4616 | const polygon = e.overlay;
|
4617 | var id = 'blue-' + new Date().getTime();
|
4618 | const shape = this.mapUtil.drawPolygon({
|
4619 | polygon: polygon,
|
4620 | onSuccess: () => {
|
4621 | // 判断多边形是否合法
|
4622 | if (GeoUtil.isPolygon(
|
4623 | polygon.so.map(point => {
|
4624 | return [point.lat, point.lng]
|
4625 | })
|
4626 | )
|
4627 | ) {
|
4628 | this.mapUtil.map.removeOverlay(polygon);
|
4629 | alert('不是一个标准的多边形');
|
4630 | return;
|
4631 | }
|
4632 | this.mapUtil.map.removeOverlay(polygon);
|
4633 | // 添加到map中
|
4634 | console.log('添加到blueMap中');
|
4635 | console.log(polygon);
|
4636 | blueMap[id] = polygon;
|
4637 | // 绘制的坐标点
|
4638 | var source = polygon.so.map((point) => {return [point.lng, point.lat]});
|
4639 | console.log('绘制的坐标点');
|
4640 | console.log(source);
|
4641 | let pointss = this.redMerge([source]);
|
4642 | console.log('取与红色区域的交集');
|
4643 | console.log(pointss);
|
4644 | // 绘制交集
|
4645 | for (let points of pointss) {
|
4646 | var polygons = this.mapUtil.pointsToPolygons(points);
|
4647 | polygons = polygons.map((polygon) => {
|
4648 | return {
|
4649 | polygon: polygon,
|
4650 | }
|
4651 | });
|
4652 | console.log('多边形');
|
4653 | console.log(polygons);
|
4654 | this.mapUtil.drawPolygons(polygons);
|
4655 | }
|
4656 |
|
4657 | // if (points && points.length && points[0] && points[0][0]) {
|
4658 | // console.log(arr[0][0])
|
4659 | // var polygon = this.mapUtil.pointsToPolygon(arr[0][0]);
|
4660 | // console.log(polygon)
|
4661 | // polygons.push(polygon);
|
4662 | // return polygons;
|
4663 | // }
|
4664 | },
|
4665 | onError: (msg) => {
|
4666 | alert(msg)
|
4667 | }
|
4668 | });
|
4669 | blueMap[id] = shape
|
4670 | this.addContextMenu(id, shape)
|
4671 | }
|
4672 | // 启用手动绘制
|
4673 | enableManualDraw = () => {
|
4674 | this.mapUtil.enableManualDraw()
|
4675 | }
|
4676 | // 添加右键, id用于获取和删除覆盖物值班表和
|
4677 | addContextMenu(id, overlay){
|
4678 | this.mapUtil.addContextMenu(overlay, {
|
4679 | menus: [
|
4680 | {
|
4681 | text: '删除',
|
4682 | handler: () => {
|
4683 | if (confirm('您确定要删除吗')) {
|
4684 | this.mapUtil.map.removeOverlay(overlay)
|
4685 | if (blueMap.has(id)) blueMap.delete(id)
|
4686 | }
|
4687 | }
|
4688 | }
|
4689 | ]
|
4690 | })
|
4691 | }
|
4692 | // 红色区域取交集
|
4693 | redMerge = (source) => {
|
4694 | // 与灰色区域取差集
|
4695 | var polygons = [];
|
4696 | for (var redOverlays of Object.values(redMap)) {
|
4697 | for (var redOverlay of redOverlays) {
|
4698 | // 必须分开裁切, 一次性裁切会报错
|
4699 | var clip = redOverlay.so.map((point) => {return [point.lng, point.lat]});
|
4700 | var result = greinerHormann.intersection(source, [clip]);
|
4701 | if (result && result.length) polygons.push(result[0]);
|
4702 | }
|
4703 | }
|
4704 | return polygons;
|
4705 | }
|
4706 |
|
4707 |
|
4708 | <MapContainer id="map"></MapContainer>
|
4709 | <ButtonDraw onClick={this.enableManualDraw}>划分区域</ButtonDraw>
|
4710 | ```
|
4711 | [返回目录](#utils)
|
4712 |
|
4713 |
|
4714 |
|
4715 |
|
4716 |
|
4717 |
|
4718 | ## GeoUtil
|
4719 | [地理工具](https://unpkg.com/seedsui-react/src/lib/GeoUtil.js)
|
4720 |
|
4721 | ### 多边形转线
|
4722 |
|
4723 |
|
4724 | | 方法 | 返回值 | 说明 |
|
4725 | | --- | --- | --- |
|
4726 | | polygonToLines | <code>Line<Array></code> | 多边形
|
4727 |
|
4728 | <br/>
|
4729 |
|
4730 | | 参数 | 参数类型 | 说明 |
|
4731 | | --- | --- | --- |
|
4732 | | polygon | <code>Number</code> | 多边形 |
|
4733 | | isRegular | <code>Boolean</code> | 是否要求是一个标准的多边形, 如果传true, 则返回集合会加上首尾互连
|
4734 |
|
4735 |
|
4736 | ### 示例
|
4737 | ```javascript
|
4738 | var lines = GeoUtils.polygonToLines([[1,0], [2, 0], [3, 0]], true)
|
4739 | console.log(lines)
|
4740 | ```
|
4741 | [返回目录](#utils)
|