framework / eagle-web-toolkit

Download as
Browse Code »

Commit 491c5ab115afb93939eb8ab69bc74016ba938791

Authored by Aaron
1 parent 62df55f9
Exists in master and in 1 other branch legacy

暂时替换markdown-loader中的双括号解决报错问题

Showing 4 changed files with 117 additions and 20 deletions   Show diff stats
examples/views/docs/component/detail.md
  Diff comments   View file @491c5ab
1 # Detail 详情 1 # Detail 详情
2 2
3 -> 将Form组件的值展示位详情 3 +展示组件model对象的详情
4 4
5 ## 基础用法 5 ## 基础用法
6 6
7 -配置项list将无视配置的type，统一渲染为label 7 +展示配置列表数据源的某一条数据的详情，通常配合**Table**、**Form**组件使用
8 8
9 -::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件 9 +::: snippet 使用`list`属性设置数据源，其中**span**设置占位，`value`为list中key构成的**Object**类型对象
10 10
11 ```html 11 ```html
12 <template> 12 <template>
13 - <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail> 13 + <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
14 </template> 14 </template>
15 15
16 <script> 16 <script>
17 export default { 17 export default {
18 data() { 18 data() {
19 return { 19 return {
20 - detailList: [  
21 - { type: 'el-input', key: 'name', label: '名称' },  
22 - { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },  
23 - { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },  
24 - { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' }, 20 + list: [
  21 + { key: 'name', label: '姓名' },
  22 + { key: 'age', label: '年龄' },
  23 + { key: 'political', label: '政治面貌' },
  24 + { key: 'troop', label: '部队番号', span: 24 },
  25 + { key: 'position', label: '职务' },
  26 + { key: 'partner', label: '搭档' },
25 ], 27 ],
26 - detailModel: {  
27 - name: '老A',  
28 - address: 'Any where',  
29 - postcode: 123456,  
30 - number: 'N栋N-N' 28 + model: {
  29 + name: '李云龙',
  30 + age: 18,
  31 + political: '中共党员',
  32 + troop: '独立团',
  33 + position: '团长',
  34 + partner: '赵刚',
  35 + }
  36 + }
  37 + },
  38 +}
  39 +</script>
  40 +```
  41 +
  42 +:::
  43 +
  44 +## 分组展示
  45 +
  46 +将需要展示的数据分组显示
  47 +
  48 +::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
  49 +
  50 +```html
  51 +<template>
  52 + <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
  53 +</template>
  54 +
  55 +<script>
  56 +export default {
  57 + data() {
  58 + return {
  59 + list: [
  60 + { key: 'name', label: '姓名' },
  61 + { key: 'age', label: '年龄' },
  62 + { key: 'political', label: '政治面貌', group: '工作信息' },
  63 + { key: 'troop', label: '部队番号', group: '工作信息' },
  64 + { key: 'position', label: '职务', group: '工作信息' },
  65 + { key: 'partner', label: '搭档', group: '工作信息' },
  66 + ],
  67 + model: {
  68 + name: '李云龙',
  69 + age: 18,
  70 + political: '中共党员',
  71 + troop: '独立团',
  72 + position: '团长',
  73 + partner: '赵刚',
  74 + }
  75 + }
  76 + },
  77 +}
  78 +</script>
  79 +```
  80 +
  81 +:::
  82 +
  83 +## 自定义内容
  84 +
  85 +基本的数据展示并不能满足复杂页面展示需求，因此可以通过**具名插槽**的方式替换对应的展示位
  86 +
  87 +::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
  88 +
  89 +```html
  90 +<template>
  91 + <eagle-detail :value="model" :list="list" style="width: 800px;">
  92 + <!-- <template #item-position="{ value }">
  93 + <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>
  96 + <template #item-partner="{ model }">
  97 + <el-tag type="danger" size="small">{{ model ? model.partner : '-' }}</el-tag>
  98 + </template>
  99 + </eagle-detail>
  100 +</template>
  101 +
  102 +<script>
  103 +export default {
  104 + data() {
  105 + return {
  106 + list: [
  107 + { key: 'name', label: '姓名' },
  108 + { key: 'age', label: '年龄' },
  109 + { key: 'political', label: '政治面貌', group: '工作信息' },
  110 + { key: 'troop', label: '部队番号', group: '工作信息' },
  111 + { key: 'position', label: '职务', group: '工作信息' },
  112 + { key: 'partner', label: '搭档', group: '工作信息' },
  113 + ],
  114 + model: {
  115 + name: '李云龙',
  116 + age: 18,
  117 + political: '中共党员',
  118 + troop: '独立团',
  119 + position: '团长',
  120 + partner: '赵刚',
31 } 121 }
32 } 122 }
33 }, 123 },
@@ -45,12 +135,15 @@ export default { @@ -45,12 +135,15 @@ export default {
45 135
46 参数|说明|类型|可选值|默认值 136 参数|说明|类型|可选值|默认值
47 -|-|-|-|- 137 -|-|-|-|-
48 -value / v-model | 绑定值 | Object | - | - 138 +value / v-model | 绑定值 | Object | - | {}
49 list | 表单项配置列表 | Array | - | [] 139 list | 表单项配置列表 | Array | - | []
  140 +formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
  141 +span | 数据项占位 | Number | 0 - 24 | 8
50 142
51 ## List 表单项配置列表 143 ## List 表单项配置列表
52 144
53 参数|说明|类型|可选值|默认值 145 参数|说明|类型|可选值|默认值
54 -|-|-|-|- 146 -|-|-|-|-
55 key | 参数名 | String | - | - 147 key | 参数名 | String | - | -
56 -label | 参数标签 | String | - | -  
57 \ No newline at end of file 148 \ No newline at end of file
  149 +label | 参数标签 | String | - | -
  150 +span | 数据项占位 | Number | 0 - 24 | -
58 \ No newline at end of file 151 \ No newline at end of file
examples/views/layout/component.vue
  Diff comments   View file @491c5ab
@@ -15,7 +15,6 @@ @@ -15,7 +15,6 @@
15 </el-menu-item-group> 15 </el-menu-item-group>
16 </el-menu> 16 </el-menu>
17 </el-aside> 17 </el-aside>
18 - <a class="target-fix"></a>  
19 <el-main class="layout-main__component"> 18 <el-main class="layout-main__component">
20 <router-view></router-view> 19 <router-view></router-view>
21 </el-main> 20 </el-main>
@@ -59,6 +58,11 @@ export default { @@ -59,6 +58,11 @@ export default {
59 } 58 }
60 } 59 }
61 }); 60 });
  61 + // 初次加载时根据url hash跳转到指定锚点
  62 + if (this.$route.hash) {
  63 + const anchor = document.querySelector(this.$route.hash);
  64 + document.documentElement.scrollTop = anchor.offsetTop - 65;
  65 + }
62 }, 66 },
63 watch:{ 67 watch:{
64 $route(to, from) { 68 $route(to, from) {
packages/detail/index.vue
  Diff comments   View file @491c5ab
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 <template v-for="(item, index) in data.list"> 31 <template v-for="(item, index) in data.list">
32 <el-col :key="index + 'data'" :span="!item.span ? span : item.span"> 32 <el-col :key="index + 'data'" :span="!item.span ? span : item.span">
33 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key"> 33 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key">
34 - <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot> 34 + <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" :value="model[item.key]" v-bind="item"></slot>
35 <label v-else> 35 <label v-else>
36 <template v-if="item.formatter"> 36 <template v-if="item.formatter">
37 {{ item.formatter(item.key, model, item.key) }} 37 {{ item.formatter(item.key, model, item.key) }}
webpack/markdown-loader.js
  Diff comments   View file @491c5ab
@@ -16,11 +16,11 @@ module.exports = function(source) { @@ -16,11 +16,11 @@ module.exports = function(source) {
16 highlight: function(str, lang) { 16 highlight: function(str, lang) {
17 if (lang && hljs.getLanguage(lang)) { 17 if (lang && hljs.getLanguage(lang)) {
18 return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${ 18 return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${
19 - hljs.highlight(lang, str, true).value 19 + hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value
20 }</code></pre>`; 20 }</code></pre>`;
21 } 21 }
22 return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${markdownIt.utils.escapeHtml( 22 return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${markdownIt.utils.escapeHtml(
23 - str 23 + str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }')
24 )}</code></pre>`; 24 )}</code></pre>`;
25 } 25 }
26 }); 26 });