From 491c5ab115afb93939eb8ab69bc74016ba938791 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Tue, 27 Aug 2019 16:21:51 +0800
Subject: [PATCH] 暂时替换markdown-loader中的双括号解决报错问题

---
 examples/views/docs/component/detail.md | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------
 examples/views/layout/component.vue     |   6 +++++-
 packages/detail/index.vue               |   2 +-
 webpack/markdown-loader.js              |   4 ++--
 4 files changed, 117 insertions(+), 20 deletions(-)

diff --git a/examples/views/docs/component/detail.md b/examples/views/docs/component/detail.md
index 119b8f8..f93281b 100644
--- a/examples/views/docs/component/detail.md
+++ b/examples/views/docs/component/detail.md
@@ -1,33 +1,123 @@
 # Detail 详情
 
-> 将Form组件的值展示位详情
+展示组件model对象的详情
 
 ## 基础用法
 
-配置项list将无视配置的type，统一渲染为label
+展示配置列表数据源的某一条数据的详情，通常配合**Table**、**Form**组件使用
 
-::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件
+::: snippet 使用`list`属性设置数据源，其中**span**设置占位，`value`为list中key构成的**Object**类型对象
 
 ```html
 <template>
-  <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
+  <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      detailList: [
-        { type: 'el-input', key: 'name', label: '名称' },
-        { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
-        { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
-        { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄' },
+        { key: 'political', label: '政治面貌' },
+        { key: 'troop', label: '部队番号', span: 24 },
+        { key: 'position', label: '职务' },
+        { key: 'partner', label: '搭档' },
       ],
-      detailModel: {
-        name: '老A',
-        address: 'Any where',
-        postcode: 123456,
-        number: 'N栋N-N'
+      model: {
+        name: '李云龙',
+        age: 18,
+        political: '中共党员',
+        troop: '独立团',
+        position: '团长',
+        partner: '赵刚',
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 分组展示
+
+将需要展示的数据分组显示
+
+::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
+
+```html
+<template>
+  <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄' },
+        { key: 'political', label: '政治面貌', group: '工作信息' },
+        { key: 'troop', label: '部队番号', group: '工作信息' },
+        { key: 'position', label: '职务', group: '工作信息' },
+        { key: 'partner', label: '搭档', group: '工作信息' },
+      ],
+      model: {
+        name: '李云龙',
+        age: 18,
+        political: '中共党员',
+        troop: '独立团',
+        position: '团长',
+        partner: '赵刚',
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 自定义内容
+
+基本的数据展示并不能满足复杂页面展示需求，因此可以通过**具名插槽**的方式替换对应的展示位
+
+::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组
+
+```html
+<template>
+  <eagle-detail :value="model" :list="list" style="width: 800px;">
+    <!-- <template #item-position="{ value }">
+      <el-tag type="primary" size="small">{{ value }}</el-tag>
+    </template> -->
+    <el-tag slot="item-position" slot-scope="{ value }" type="primary" size="small">{{ value }}</el-tag>
+    <template #item-partner="{ model }">
+      <el-tag type="danger" size="small">{{ model ? model.partner : '-' }}</el-tag>
+    </template>
+  </eagle-detail>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄' },
+        { key: 'political', label: '政治面貌', group: '工作信息' },
+        { key: 'troop', label: '部队番号', group: '工作信息' },
+        { key: 'position', label: '职务', group: '工作信息' },
+        { key: 'partner', label: '搭档', group: '工作信息' },
+      ],
+      model: {
+        name: '李云龙',
+        age: 18,
+        political: '中共党员',
+        troop: '独立团',
+        position: '团长',
+        partner: '赵刚',
       }
     }
   },
@@ -45,12 +135,15 @@ export default {
 
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
-value / v-model |	绑定值 | Object | - | -
+value / v-model |	绑定值 | Object | - | {}
 list | 表单项配置列表 | Array | - | []
+formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
+span | 数据项占位 | Number | 0 - 24 | 8
 
 ## List 表单项配置列表
 
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
 key | 参数名 | String | - | -
-label | 参数标签 | String | - | -
\ No newline at end of file
+label | 参数标签 | String | - | -
+span | 数据项占位 | Number | 0 - 24 | -
\ No newline at end of file
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 3eaf85d..51f764b 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -15,7 +15,6 @@
           </el-menu-item-group>
         </el-menu>
       </el-aside>
-      <a class="target-fix"></a>
       <el-main class="layout-main__component">
         <router-view></router-view>
       </el-main>
@@ -59,6 +58,11 @@ export default {
         }
       }
     });
+    // 初次加载时根据url hash跳转到指定锚点
+    if (this.$route.hash) {
+      const anchor = document.querySelector(this.$route.hash);
+      document.documentElement.scrollTop = anchor.offsetTop - 65;
+    }
   },
   watch:{
     $route(to, from) {
diff --git a/packages/detail/index.vue b/packages/detail/index.vue
index 3aa0aed..ac14079 100644
--- a/packages/detail/index.vue
+++ b/packages/detail/index.vue
@@ -31,7 +31,7 @@
           <template v-for="(item, index) in data.list">
             <el-col :key="index + 'data'" :span="!item.span ? span : item.span">
               <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key">
-                <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
+                <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>
                 <label v-else>
                   <template v-if="item.formatter">
                     {{ item.formatter(item.key, model, item.key) }}
diff --git a/webpack/markdown-loader.js b/webpack/markdown-loader.js
index 91ea13c..3c67ef1 100644
--- a/webpack/markdown-loader.js
+++ b/webpack/markdown-loader.js
@@ -16,11 +16,11 @@ module.exports = function(source) {
     highlight: function(str, lang) {
       if (lang && hljs.getLanguage(lang)) {
         return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${
-          hljs.highlight(lang, str, true).value
+          hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value
         }</code></pre>`;
       }
       return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${markdownIt.utils.escapeHtml(
-        str
+        str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }')
       )}</code></pre>`;
     }
   });
--
libgit2 0.21.0