pit-docs-mcp 1.0.2

package/docs/pitElementUi/skeleton.md

@@ -0,0 +1,316 @@
+## Skeleton 骨架屏
+
+在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。
+
+### 基础用法
+
+基础的骨架效果。
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### 更多参数
+
+可以配置骨架屏段落数量，以便更接近真实渲染效果。首行会被渲染一个长度 33% 的段首。
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### 动画效果
+
+显示动画效果。
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### 自定义样式
+
+ElementPlus 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。
+
+我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading 状态
+
+当 Loading 结束之后，我们往往需要显示真实的 UI，可以通过 `loading` 的值来控制是否显示真实的 DOM。然后通过
+具名 Slot 来设置当 loading 结束之后需要展示的 UI。
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">切换 Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>好吃的汉堡</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### 渲染多条数据
+
+大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI。利用 `count` 这个属性就能控制渲染多少条假的数据在页面上
+
+:::tip
+请注意, 请尽可能的将 `count` 的大小保持在最小状态, 即使是假的 UI, DOM 元素多了之后, 照样会引起性能问题, 并且在骨架屏销毁时所消耗的时间也会更长(相对的)。
+:::
+
+:::demo
+
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">点我重新加载</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>{{ item.name }}</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: '鹿',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: '马',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: '山狮',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### 防止渲染抖动
+
+有的时候，API 的请求回来的特别快，往往骨架占位刚刚被渲染，真实的数据就已经回来了，用户的界面会突然一闪，此时为了避免这种情况，就需要通过 `throttle` 属性来避免这个问题。
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">切换 Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>好吃的汉堡</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### Skeleton Attributes
+
+| 参数     | 说明                                        | 类型    | 可选值       | 默认值 |
+| -------- | ------------------------------------------- | ------- | ------------ | ------ |
+| animated | 是否使用动画                                | boolean | true / false | false  |
+| count    | 渲染多少个 template, 建议使用尽可能小的数字 | number  | integer      | 1      |
+| loading  | 是否显示 skeleton 骨架屏                    | boolean | true / false | true |
+| rows     | 骨架屏段落数量                              | number  | 正整数       | 4      |
+| throttle | 延迟占位 DOM 渲染的时间, 单位是毫秒         | number  | 正整数       | 0      |
+
+### Skeleton Item Attributes
+
+| 参数    | 说明                     | 类型         | 可选值                                                               | 默认值 |
+| ------- | ------------------------ | ------------ | -------------------------------------------------------------------- | ------ |
+| variant | 当前显示的占位元素的样式 | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text   |
+
+### Skeleton Slots
+
+| name     | description          |
+| -------- | -------------------- |
+| default  | 用来展示真实 UI     |
+| template | 用来展示自定义占位符 |

package/docs/pitElementUi/slider.md

@@ -0,0 +1,237 @@
+## Slider 滑块
+
+通过拖动滑块在一个固定区间内进行选择
+
+### 基础用法
+
+在拖动滑块时，显示当前值
+
+:::demo 通过设置绑定值自定义滑块的初始值
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-slider v-model="value1"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">自定义初始值</span>
+    <el-slider v-model="value2"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">隐藏 Tooltip</span>
+    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">格式化 Tooltip</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">禁用</span>
+    <el-slider v-model="value5" disabled></el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 50,
+        value3: 36,
+        value4: 48,
+        value5: 42
+      }
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 离散值
+
+选项可以是离散的
+
+:::demo 改变`step`的值可以改变步长，通过设置`show-stops`属性可以显示间断点
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">不显示间断点</span>
+    <el-slider
+      v-model="value1"
+      :step="10">
+    </el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">显示间断点</span>
+    <el-slider
+      v-model="value2"
+      :step="10"
+      show-stops>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 带有输入框
+
+通过输入框设置精确数值
+
+:::demo 设置`show-input`属性会在右侧显示一个输入框
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      show-input>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 范围选择
+
+支持选择某一数值范围
+
+:::demo 设置`range`即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      show-stops
+      :max="10">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [4, 8]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 竖向模式
+
+:::demo 设置`vertical`可使 Slider 变成竖向模式，此时必须设置高度`height`属性
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      vertical
+      height="200px">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 展示标记
+
+:::demo 设置 `marks` 属性可以展示标记
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      :marks="marks">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [30, 60],
+        marks: {
+          0: '0°C',
+          8: '8°C',
+          37: '37°C',
+          50: {
+            style: {
+              color: '#1989FA'
+            },
+            label: this.$createElement('strong', '50%')
+          }
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | number | — | 0 |
+| min | 最小值 | number | — | 0 |
+| max | 最大值 | number | — | 100 |
+| disabled | 是否禁用 | boolean | — | false |
+| step | 步长 | number | — | 1 |
+| show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false |
+| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true |
+| input-size | 输入框的尺寸 | string | large / medium / small / mini | small |
+| show-stops | 是否显示间断点 | boolean | — | false |
+| show-tooltip | 是否显示 tooltip | boolean | — | true |
+| format-tooltip | 格式化 tooltip message | function(value) | — | — |
+| range | 是否为范围选择 | boolean | — | false |
+| vertical | 是否竖向模式 | boolean | — | false |
+| height | Slider 高度，竖向模式时必填 | string | — | — |
+| label | 屏幕阅读器标签 | string | — | — |
+| debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |
+| tooltip-class | tooltip 的自定义类名 | string | — | — |
+| marks | 标记， key 的类型必须为 number 且取值在闭区间 `[min, max]` 内，每个标记可以单独设置样式 | object | — | — |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值 |
+| input | 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） | 改变后的值 |

package/docs/pitElementUi/steps.md

@@ -0,0 +1,154 @@
+## Steps 步骤条
+引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
+
+### 基础用法
+
+简单的步骤条。
+
+:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Number`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
+```html
+<el-steps :active="active" finish-status="success">
+  <el-step title="步骤 1"></el-step>
+  <el-step title="步骤 2"></el-step>
+  <el-step title="步骤 3"></el-step>
+</el-steps>
+
+<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        active: 0
+      };
+    },
+
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 含状态步骤条
+
+每一步骤显示出该步骤的状态。
+
+:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
+```html
+<el-steps :space="200" :active="1" finish-status="success">
+  <el-step title="已完成"></el-step>
+  <el-step title="进行中"></el-step>
+  <el-step title="步骤 3"></el-step>
+</el-steps>
+```
+:::
+
+### 有描述的步骤条
+
+每个步骤有其对应的步骤状态描述。
+
+:::demo
+```html
+<el-steps :active="1">
+  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤 3" description="这段就没那么长了"></el-step>
+</el-steps>
+```
+:::
+
+### 居中的步骤条
+
+标题和描述都将居中。
+
+:::demo
+```html
+<el-steps :active="2" align-center>
+  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
+</el-steps>
+```
+:::
+
+### 带图标的步骤条
+步骤条内可以启用各种自定义的图标。
+
+:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。
+```html
+
+<el-steps :active="1">
+  <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+  <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+  <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+</el-steps>
+```
+:::
+
+### 竖式步骤条
+
+竖直方向的步骤条。
+
+:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
+```html
+<div style="height: 300px;">
+  <el-steps direction="vertical" :active="1">
+    <el-step title="步骤 1"></el-step>
+    <el-step title="步骤 2"></el-step>
+    <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
+  </el-steps>
+</div>
+```
+:::
+
+### 简洁风格的步骤条
+设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。
+
+:::demo
+```html
+
+<el-steps :active="1" simple>
+  <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+  <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+  <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+  <el-step title="步骤 1" ></el-step>
+  <el-step title="步骤 2" ></el-step>
+  <el-step title="步骤 3" ></el-step>
+</el-steps>
+```
+:::
+
+### Steps Attributes
+
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — |
+| direction | 显示方向 | string | vertical/horizontal | horizontal |
+| active | 设置当前激活步骤  | number | — | 0 |
+| process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process |
+| finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish |
+| align-center | 进行居中对齐 | boolean | - | false |
+| simple | 是否应用简洁风格 | boolean | - | false |
+
+### Step Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| title | 标题 | string | — | — |
+| description | 描述性文字 | string | — | — |
+| icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | — |
+| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |
+
+### Step Slot
+| name | 说明  |
+|----|----|
+| icon | 自定义图标 |
+| title | 自定义标题 |
+| description | 自定义描述性文字 |