6
6
className('class-1 class-2');
7
7
style(['width'=>'100px']);
8
8
```
9
+ ## 基础表单
10
+
11
+ 可实现简单的表单,不带模型
12
+
13
+ ![ image-20200331141335210] ( components.assets/image-20200331141335210.png )
14
+
15
+ ``` php
16
+ $baseForm = new BaseForm();//实例化
17
+ $baseForm->action(route("order-express"));//设置表单提交地址,POST请求
18
+ $baseForm->emit("closeDialog");//设置表单提交成功触发事件
19
+ $baseForm->emit("tableReload");
20
+ $baseForm->addValue("order_no", $actions->getRow()->order_no);//添加表单域的值
21
+ $baseForm->item("express_company", "物流公司")->required();//添加可编辑字段,用法模型表单一样
22
+ $baseForm->item("express_no", "物流单号")->required();
23
+ ```
24
+
25
+
26
+
9
27
## 展示组件
10
28
11
29
### Card 卡片
@@ -16,8 +34,6 @@ style(['width'=>'100px']);
16
34
Card::make()->content();
17
35
```
18
36
19
-
20
-
21
37
### Steps 步骤条
22
38
23
39
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。
@@ -86,6 +102,8 @@ Alert::make("title","desc");
86
102
87
103
### Tag 标签
88
104
105
+ 更多属性请查看element-ui文档
106
+
89
107
``` php
90
108
Tag::make();
91
109
```
@@ -181,6 +199,9 @@ Tag::make()->href("http://www.baidu.com");
181
199
#### 图标类名
182
200
183
201
可直接使用内置 [ Icon 图标] ( https://element.eleme.cn/#/zh-CN/component/icon ) ,或使用自定义图标
202
+
203
+ 更多属性请查看element-ui文档
204
+
184
205
``` php
185
206
Tag::make()->icon('el-icon-platform-eleme');
186
207
//OR
@@ -192,21 +213,37 @@ Tag::make()->icon('iconfont my-icon-name');
192
213
Avatar::make();
193
214
```
194
215
### Image 图片
195
- 可显示单张或多张图片,支持大图预览
216
+ 可显示单张或多张图片,支持大图预览,更多属性请查看element-ui文档
196
217
``` php
197
218
Image::make();
198
219
```
199
220
### Icon 图标
221
+
222
+ 更多属性请查看element-ui文档
223
+
200
224
``` php
201
225
Icon::make()
202
226
```
203
227
228
+ ### Dialog 对话框
229
+
230
+ 目前此组件不能单独使用,需配合其他组件使用,如` ActionButton ` ,` ToolbarButton `
231
+
232
+ ``` php
233
+ Dialog::make()
234
+ ->.....//更多属性请查看element-ui文档
235
+ ->slot(function(Content $content){//弹窗内容组件,闭包传入一个content组件
236
+
237
+ });
238
+ ```
239
+
240
+
204
241
205
242
### 操作组件
206
243
207
244
#### ActionButton
208
245
209
- 可用于vue路由导航,异步请求,连接跳转 操作
246
+ 可用于vue路由导航,异步请求,连接跳转,dialog 操作
210
247
211
248
``` php
212
249
ActionButton::make("ActionName")
@@ -215,24 +252,67 @@ ActionButton::make("ActionName")
215
252
->message("确认操作提示信息")
216
253
->handler("route")
217
254
->uri("WeChat/manage/{app_id}")//路径,{xxx}会被自动替换成当前行的对应值,支持 ?x=x 参数
255
+ ->dialog(function($dialog){//返回dialog实例
256
+
257
+ })
218
258
//调用代码
219
259
$grid->actions(function (Grid\Actions $actions) {
220
260
$actions->add(...);
221
261
});
222
262
```
223
263
264
+
265
+
266
+ Dialog代码示例
267
+
268
+ ![ image-20200331142220245] ( components.assets/image-20200331142220245.png )
269
+
270
+ ``` php
271
+ $actions->add(ActionButton::make("发货")->order(4)->dialog(function (Dialog $dialog) use ($actions) {
272
+ $dialog->title("订单发货")->showClose(false)->width('500px');
273
+ $dialog->slot(function (Content $content) use ($actions) {
274
+ $baseForm = new BaseForm();
275
+ $baseForm->action(route("order-express"));
276
+ $baseForm->emit("closeDialog");
277
+ $baseForm->emit("tableReload");
278
+ $baseForm->addValue("order_no", $actions->getRow()->order_no);
279
+ $baseForm->item("express_company", "物流公司")->required();
280
+ $baseForm->item("express_no", "物流单号")->required();
281
+ $content->row($baseForm);
282
+ });
283
+ }));
284
+ ```
285
+
286
+ 这里的dialog展示的是一个表单,当然你可以展示任意组件
287
+
288
+
289
+
224
290
### 工具栏组件
225
291
226
292
#### ToolButton
227
293
228
- 可用于vue路由导航,异步请求,连接跳转 操作
294
+ 可用于vue路由导航,异步请求,连接跳转 , Dialog
295
+
296
+
297
+
298
+ 普通演示
229
299
230
300
``` php
231
301
Grid\Tools\ToolButton::make("同步粉丝")
232
302
->handler("request") // 类型 request|route|link
233
303
->uri("") //路径
234
304
```
235
305
306
+ Dialog演示,Dialog属性请参考
307
+
308
+ ``` php
309
+ $toolbars->addRight(Grid\Tools\ToolButton::make("采集")->dialog(function (Dialog $dialog){
310
+ $dialog->slot(function (Content $content) {
311
+ $content->row(Alert::make("123456"));
312
+ });
313
+ }));
314
+ ```
315
+
236
316
其他属性可参考 ` el-button `
237
317
238
318
## 表单组件
@@ -241,6 +321,8 @@ Grid\Tools\ToolButton::make("同步粉丝")
241
321
242
322
### Radio 单选框
243
323
324
+ 更多属性请查看element-ui文档
325
+
244
326
``` php
245
327
RadioGroup::make(1, [
246
328
Radio::make(1, "公众号"),
@@ -250,6 +332,8 @@ RadioGroup::make(1, [
250
332
251
333
### Checkbox 多选框
252
334
335
+ 更多属性请查看element-ui文档
336
+
253
337
``` php
254
338
CheckboxGroup::make()->options([
255
339
Checkbox::make(value,name),
@@ -259,12 +343,16 @@ CheckboxGroup::make()->options([
259
343
260
344
### Input 输入框
261
345
346
+ 更多属性请查看element-ui文档
347
+
262
348
```
263
349
Input::make()
264
350
```
265
351
266
352
### InputNumber 计数器
267
353
354
+ 更多属性请查看element-ui文档
355
+
268
356
```
269
357
InputNumber::make()
270
358
```
@@ -289,6 +377,8 @@ Select::make()
289
377
Select::make()->filterable()->remote($remoteUrl)
290
378
```
291
379
380
+ 更多属性请查看element-ui文档
381
+
292
382
### Cascader 级联选择器
293
383
294
384
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择
@@ -342,37 +432,50 @@ $form->item("goods_class_path", "产品分类")->displayComponent(function () {
342
432
Cascader::make()->panel(true)
343
433
```
344
434
435
+ 更多属性请查看element-ui文档
436
+
345
437
### Switch 开关
346
438
347
439
``` php
348
440
CSwitch::make()
349
441
```
350
442
443
+ 更多属性请查看element-ui文档
444
+
351
445
### Slider 滑块
352
446
353
447
``` php
354
448
Slider::make()
355
449
```
356
450
451
+ 更多属性请查看element-ui文档
452
+
357
453
### TimePicker 时间选择器
358
454
359
455
``` php
360
456
TimePicker::make()
361
457
```
362
458
459
+ 更多属性请查看element-ui文档
460
+
363
461
### DatePicker 日期选择器
364
462
365
463
``` php
366
464
DatePicker::make()
367
465
```
368
466
467
+ 更多属性请查看element-ui文档
468
+
369
469
### DateTimePicker 日期时间选择器
370
470
371
471
``` php
372
472
DateTimePicker::make()
373
473
```
374
474
475
+ 更多属性请查看element-ui文档
476
+
375
477
### Upload 上传
478
+
376
479
通过以下的调用来生成上传组件
377
480
``` php
378
481
$form->item('avatar', '头像')->displayComponent(Upload::make()->pictureCard()->avatar()->path('avatar')->uniqueName())
0 commit comments