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 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 11 ```html
12 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 14 </template>
15 15  
16 16 <script>
17 17 export default {
18 18 data() {
19 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 135  
46 136 参数|说明|类型|可选值|默认值
47 137 -|-|-|-|-
48   -value / v-model | 绑定值 | Object | - | -
  138 +value / v-model | 绑定值 | Object | - | {}
49 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 143 ## List 表单项配置列表
52 144  
53 145 参数|说明|类型|可选值|默认值
54 146 -|-|-|-|-
55 147 key | 参数名 | String | - | -
56   -label | 参数标签 | String | - | -
57 148 \ No newline at end of file
  149 +label | 参数标签 | String | - | -
  150 +span | 数据项占位 | Number | 0 - 24 | -
58 151 \ No newline at end of file
... ...
examples/views/layout/component.vue
  Diff comments   View file @491c5ab
... ... @@ -15,7 +15,6 @@
15 15 </el-menu-item-group>
16 16 </el-menu>
17 17 </el-aside>
18   - <a class="target-fix"></a>
19 18 <el-main class="layout-main__component">
20 19 <router-view></router-view>
21 20 </el-main>
... ... @@ -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 67 watch:{
64 68 $route(to, from) {
... ...
packages/detail/index.vue
  Diff comments   View file @491c5ab
... ... @@ -31,7 +31,7 @@
31 31 <template v-for="(item, index) in data.list">
32 32 <el-col :key="index + 'data'" :span="!item.span ? span : item.span">
33 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 35 <label v-else>
36 36 <template v-if="item.formatter">
37 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 16 highlight: function(str, lang) {
17 17 if (lang && hljs.getLanguage(lang)) {
18 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 20 }</code></pre>`;
21 21 }
22 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 24 )}</code></pre>`;
25 25 }
26 26 });
... ...