Browse Source

feat: add Sticky and ContentDetailWrap doc

陈凯龙 3 years ago
parent
commit
ea9deca0f5
3 changed files with 79 additions and 0 deletions
  1. 8 0
      .vitepress/config.js
  2. 42 0
      components/content-detail-wrap.md
  3. 29 0
      components/sticky.md

+ 8 - 0
.vitepress/config.js

@@ -201,6 +201,14 @@ function createSidebar() {
             text: 'Error 缺省组件',
             text: 'Error 缺省组件',
             link: '/components/error',
             link: '/components/error',
           },
           },
+          {
+            text: 'Sticky 黏性组件',
+            link: '/components/sticky',
+          },
+          {
+            text: 'ContentDetailWrap 详情包裹组件',
+            link: '/components/content-detail-wrap',
+          },
         ],
         ],
       },
       },
       {
       {

+ 42 - 0
components/content-detail-wrap.md

@@ -0,0 +1,42 @@
+# ContentDetailWrap 详情包裹组件
+
+`1.2.4` 新增
+
+用于展示详情,自带返回按钮。
+
+ContentDetailWrap 组件位于 [src/components/ContentDetailWrap](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/ContentDetailWrap) 内
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
+</script>
+
+<template>
+  <ContentDetailWrap title="详情" @back="push('/example/example-page')">
+    Details
+  </ContentDetailWrap>
+</template>
+
+```
+
+## ContentDetailWrap 属性
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| title | 标题 | `string` | - | - |
+
+## ContentDetailWrap 事件
+
+| 方法名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| back | 返回事件 | - |
+
+## ContentDetailWrap 插槽
+
+| 插槽名 | 说明 | 子标签 |
+| ---- | ---- | ---- |
+| - | 默认展示内容 | - |
+| title | 自定义标题内容 | - |
+| right | 自定义右侧内容 | - |

+ 29 - 0
components/sticky.md

@@ -0,0 +1,29 @@
+# Sticky 黏性组件
+
+`1.2.4` 新增
+
+Sticky 组件位于 [src/components/Sticky](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Search) 内
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { Sticky } from '@/components/Sticky'
+</script>
+
+<template>
+  <Sticky :offset="90">
+    <div style="padding: 10px; background-color: lightblue"> Sticky 距离顶部90px </div>
+  </Sticky>
+</template>
+
+```
+
+## Sticky 属性
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| offset | 距离顶部或者底部的距离 | `number` | - | 0 |
+| zIndex | 设置元素的堆叠顺序 | `number` | - | 999 |
+| className | 设置指定的class | `string`/`number` | - | - |
+| position | 定位方式,默认为(top),表示距离顶部位置,可以设置为top或者bottom | `string` | top/bottom | top |