framework / eagle-web-toolkit

Download as
Browse Code »

Commit ddaaa9f333720f599d4b601a75a5c892f18c07d1

Authored by Aaron
1 parent 491c5ab1
Exists in master and in 1 other branch legacy

完善Detail文档

Showing 4 changed files with 75 additions and 13 deletions   Show diff stats
examples/styles/markdown.scss
  Diff comments   View file @ddaaa9f
... ... @@ -89,6 +89,7 @@
89 89 border-bottom: 1px solid $border;
90 90 text-align: left;
91 91 padding: 10px 15px;
  92 + max-width: 250px;
92 93 }
93 94 & > table th {
94 95 white-space: nowrap;
... ...
examples/views/docs/component/detail.md
  Diff comments   View file @ddaaa9f
... ... @@ -10,7 +10,7 @@
10 10  
11 11 ```html
12 12 <template>
13   - <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
  13 + <eagle-detail v-model="model" :list="list" style="width: 800px;"></eagle-detail>
14 14 </template>
15 15  
16 16 <script>
... ... @@ -45,7 +45,7 @@ export default {
45 45  
46 46 将需要展示的数据分组显示
47 47  
48   -::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
  48 +::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组，group可以是一个Object，用于快速配置一些预置的效果
49 49  
50 50 ```html
51 51 <template>
... ... @@ -55,6 +55,7 @@ export default {
55 55 <script>
56 56 export default {
57 57 data() {
  58 + const partnerGroup = { key: 'partner', icon: 'star-on', label: '附加信息' }
58 59 return {
59 60 list: [
60 61 { key: 'name', label: '姓名' },
... ... @@ -62,7 +63,7 @@ export default {
62 63 { key: 'political', label: '政治面貌', group: '工作信息' },
63 64 { key: 'troop', label: '部队番号', group: '工作信息' },
64 65 { key: 'position', label: '职务', group: '工作信息' },
65   - { key: 'partner', label: '搭档', group: '工作信息' },
  66 + { key: 'partner', label: '搭档', group: partnerGroup },
66 67 ],
67 68 model: {
68 69 name: '李云龙',
... ... @@ -82,19 +83,21 @@ export default {
82 83  
83 84 ## 自定义内容
84 85  
85   -基本的数据展示并不能满足复杂页面展示需求，因此可以通过**具名插槽**的方式替换对应的展示位
  86 +基本的数据展示并不能满足复杂页面展示需求，因此可以通过**列表项具名插槽**的方式替换对应的展示位
86 87  
87   -::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
  88 +::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`item-key`，返回值有model、value及对应配置项所有参数
88 89  
89 90 ```html
90 91 <template>
91 92 <eagle-detail :value="model" :list="list" style="width: 800px;">
92   - <!-- <template #item-position="{ value }">
  93 + <template #item-position="{ value }">
93 94 <el-tag type="primary" size="small">{{ value }}</el-tag>
94   - </template> -->
95   - <el-tag slot="item-position" slot-scope="{ value }" type="primary" size="small">{{ value }}</el-tag>
  95 + </template>
96 96 <template #item-partner="{ model }">
97   - <el-tag type="danger" size="small">{{ model ? model.partner : '-' }}</el-tag>
  97 + <el-tag type="danger" size="small">{{ model.partner }}</el-tag>
  98 + </template>
  99 + <template #item-picture="{ value }">
  100 + <img :src="value" height="100" />
98 101 </template>
99 102 </eagle-detail>
100 103 </template>
... ... @@ -102,6 +105,7 @@ export default {
102 105 <script>
103 106 export default {
104 107 data() {
  108 +
105 109 return {
106 110 list: [
107 111 { key: 'name', label: '姓名' },
... ... @@ -110,6 +114,7 @@ export default {
110 114 { key: 'troop', label: '部队番号', group: '工作信息' },
111 115 { key: 'position', label: '职务', group: '工作信息' },
112 116 { key: 'partner', label: '搭档', group: '工作信息' },
  117 + { key: 'picture', label: '图片', group: '证明材料' },
113 118 ],
114 119 model: {
115 120 name: '李云龙',
... ... @@ -118,6 +123,7 @@ export default {
118 123 troop: '独立团',
119 124 position: '团长',
120 125 partner: '赵刚',
  126 + picture: '/img/logo.svg',
121 127 }
122 128 }
123 129 },
... ... @@ -127,7 +133,59 @@ export default {
127 133  
128 134 :::
129 135  
130   ----
  136 +## 自定义表头
  137 +
  138 +在特定的业务场景下，分组标题需要展示图标或旁边需要放置按钮，此时便可以使用**表头具名插槽**替换表头内容
  139 +
  140 +> 注意：自定义表头只支持Object类型的group配置
  141 +
  142 +::: snippet 在组件内部通过具名插槽的方式，替换对应内容，表头具名插槽格式为`group-key`，返回值包括key及group配置内容
  143 +
  144 +```html
  145 +<template>
  146 + <eagle-detail :value="model" :list="list" style="width: 800px;">
  147 + <template #group-work="{ label }">
  148 + <div style="padding: 15px 5px;border-bottom: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
  149 + <span>{{ label }}
  150 + <el-tooltip class="item" effect="light" content="保密条例" placement="top">
  151 + <template #content><span style="color: red;padding-right: 5px;">*</span>保密条例</template>
  152 + <i class="el-icon-info"></i>
  153 + </el-tooltip>
  154 + </span>
  155 + <el-button size="mini" type="primary">下载</el-button>
  156 + </div>
  157 + </template>
  158 + </eagle-detail>
  159 +</template>
  160 +
  161 +<script>
  162 +export default {
  163 + data() {
  164 + const groupWork = { key: 'work', label: '工作信息' };
  165 + return {
  166 + list: [
  167 + { key: 'name', label: '姓名' },
  168 + { key: 'age', label: '年龄' },
  169 + { key: 'political', label: '政治面貌', group: groupWork },
  170 + { key: 'troop', label: '部队番号', group: groupWork },
  171 + { key: 'position', label: '职务', group: groupWork },
  172 + { key: 'partner', label: '搭档', group: groupWork },
  173 + ],
  174 + model: {
  175 + name: '李云龙',
  176 + age: 18,
  177 + political: '中共党员',
  178 + troop: '独立团',
  179 + position: '团长',
  180 + partner: '赵刚',
  181 + }
  182 + }
  183 + },
  184 +}
  185 +</script>
  186 +```
  187 +
  188 +:::
131 189  
132 190 ## API
133 191  
... ... @@ -139,6 +197,8 @@ value / v-model | 绑定值 | Object | - | {}
139 197 list | 表单项配置列表 | Array | - | []
140 198 formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
141 199 span | 数据项占位 | Number | 0 - 24 | 8
  200 +formatter | 格式化 | Function | - | -
  201 +agentKey | 代理key，用另一个key的值表示当前内容 | String | - | -
142 202  
143 203 ## List 表单项配置列表
144 204  
... ... @@ -146,4 +206,5 @@ span | 数据项占位 | Number | 0 - 24 | 8
146 206 -|-|-|-|-
147 207 key | 参数名 | String | - | -
148 208 label | 参数标签 | String | - | -
149   -span | 数据项占位 | Number | 0 - 24 | -
150 209 \ No newline at end of file
  210 +span | 数据项占位 | Number | 0 - 24 | -
  211 +group | 数据项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
... ...
packages/form/index.vue
  Diff comments   View file @ddaaa9f
... ... @@ -33,7 +33,7 @@
33 33 <template v-for="(item, index) in data.list">
34 34 <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span">
35 35 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="bindItemRules(item)">
36   - <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" v-bind="item"></slot>
  36 + <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" :value="model[item.key]" v-bind="item"></slot>
37 37 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
38 38 <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
39 39 <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
... ...
packages/search/index.vue
  Diff comments   View file @ddaaa9f
... ... @@ -14,7 +14,7 @@
14 14 <el-col v-if="bindItemVisible(item.visible)" v-show="!(collapse && index > visibleColNum - 2)" :key="index + 'data'" :span="!item.span ? span : item.span">
15 15 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
16 16 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
17   - <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" :model="model" v-bind="item"></slot>
  17 + <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" :model="model" :value="model[item.key]" v-bind="item"></slot>
18 18 <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
19 19 </el-tooltip>
20 20 </el-form-item>
... ...