framework / eagle-web-toolkit

Download as
Browse Code »

Commit 739ee90bb092c864e5104f8043dfa2a18d8b2d94

Authored by Aaron
1 parent 9802b799
Exists in master and in 1 other branch legacy

更新Search组件文档

Showing 3 changed files with 30 additions and 25 deletions   Show diff stats
examples/views/docs/component/detail.md
  Diff comments   View file @739ee90
... ... @@ -208,3 +208,4 @@ key | 参数名 | String | - | -
208 208 label | 参数标签 | String | - | -
209 209 span | 数据项占位 | Number | 0 - 24 | -
210 210 group | 数据项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
  211 +span | 数据项占位 | Number | 0 - 24 | -
... ...
examples/views/docs/component/form.md
  Diff comments   View file @739ee90
... ... @@ -252,4 +252,6 @@ on | 组件事件，Function时需要返回事件的Object | Object,Function(mod
252 252 visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
253 253 show | 组件v-show状态 | Boolean,Function(model: object) | - | true
254 254 rules | 组件校验规则 | Object,Array | - | -
255   -tip | 组件提示框 | Object,String | - | {}
256 255 \ No newline at end of file
  256 +tip | 组件提示框 | Object,String | - | {}
  257 +group | 表单项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
  258 +span | 表单项占位 | Number | 0 - 24 | -
257 259 \ No newline at end of file
... ...
examples/views/docs/component/search.md
  Diff comments   View file @739ee90
1 1 # Search 搜索
2 2  
3   -Search 搜索组件是一个使用`list`来配置生成的搜索表单
  3 +使用数据配置项列表快速生成一个搜索表单，配置方法和**Form**组件类似
4 4  
5 5 ## 基础用法
6 6  
7   -配置项list中通过type可以配置任意组件，不受框架限制
  7 +配置项list中通过type可以配置任意表单组件，不受框架约定限制
8 8  
9   -::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
  9 +::: snippet 使用`list`属性设置数据源，其中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则，`props`设置组件参数
10 10  
11 11 ```html
12 12 <template>
13   - <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
  13 + <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8"></eagle-search>
14 14 </template>
15 15  
16 16 <script>
17 17 export default {
18 18 data() {
19 19 return {
20   - searching: false,
21 20 searchList: [
22 21 { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
23   - { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
  22 + { type: 'el-input-number', key: 'type', label: '类型' },
24 23 { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
25   - { type: 'el-input', key: 'number', label: '楼栋号' },
26   - { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
27   - { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
28   - { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
  24 + { type: 'el-input', key: 'address', label: '地址' },
  25 + { type: 'el-input', key: 'not', label: '我不是', visible: (model) => `${model.type}` === '2' },
  26 + { type: 'el-input', key: 'no', label: '我没有', visible: (model) => `${model.type}` === '2' },
  27 + { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => `${model.type}` === '2' },
29 28 ]
30 29 }
31 30 },
32   - mounted() {
33   - this.searching = true;
34   - setTimeout(() => {
35   - this.searching = false;
36   - }, 3000);
37   - },
38 31 methods: {
39 32 handleSearch(value) {
40 33 console.log(value);
... ... @@ -51,15 +44,18 @@ export default {
51 44  
52 45 ## 自定义组件
53 46  
54   -在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求
  47 +在使用`list`的同时，也支持**表单项具名插槽**，以满足不同的业务需求
55 48  
56   -::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
  49 +::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`key`，返回值为model及对应配置项所有参数
57 50  
58 51 ```html
59 52 <template>
60 53 <eagle-search :list="searchList">
61 54 <template #type="{ model }">
62   - <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
  55 + <el-select v-model="model.type">
  56 + <el-option value="A">选项A</el-option>
  57 + <el-option value="B">选项B</el-option>
  58 + </el-select>
63 59 </template>
64 60 <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
65 61 <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
... ... @@ -80,10 +76,6 @@ export default {
80 76 { type: 'el-input', key: 'yeah', label: '没错' },
81 77 { type: 'el-input', key: 'absolutely', label: '就这样' },
82 78 ],
83   - dataSource: [
84   - { label: '选项A', value: 'A' },
85   - { label: '选项B', value: 'B' },
86   - ]
87 79 }
88 80 },
89 81 methods: {
... ... @@ -108,6 +100,15 @@ export default {
108 100 -|-|-|-|-
109 101 value / v-model | 绑定值 | Object | - | -
110 102 list | 表单项配置列表 | Array | - | []
  103 +formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
  104 +span | 表单项占位 | Number | 0 - 24 | 6
  105 +searching | 查询按钮加载状态 | Boolean | true/false | false
  106 +
  107 +## Methods 方法
  108 +
  109 +方法名|说明|参数
  110 +-|-|-
  111 +setModelValue | 设置表单值 | model
111 112  
112 113 ## Events 事件
113 114  
... ... @@ -129,4 +130,5 @@ style | 组件样式 | Object | - | { width: &quot;100%&quot; }
129 130 on | 组件事件 | Object,Function(model: object) | - | {}
130 131 visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
131 132 rules | 组件校验规则 | Object,Array | - | -
132   -tip | 组件提示框 | Object,String | - | {}
133 133 \ No newline at end of file
  134 +tip | 组件提示框 | Object,String | - | {}
  135 +span | 表单项占位 | Number | 0 - 24 | -
134 136 \ No newline at end of file
... ...