pit-docs-mcp 1.0.2

package/docs/pitElementUi/calendar.md

@@ -0,0 +1,66 @@
+## Calendar calendar
+
+显示日期
+
+### 基本
+
+:::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 自定义内容
+
+:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
+```html
+<el-calendar>
+  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### 自定义范围
+
+:::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| 参数             | 说明          | 类型      | 可选值        | 默认值  |
+|-----------------|-------------- |---------- |------------ |-------- |
+| value / v-model | 绑定值         | Date/string/number | —  | —      |
+| range           | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array     | —           | —      |
+| first-day-of-week | 周起始日	    | Number    | 1 到 7      |  1     |
+
+### dateCell scoped slot 参数
+| 参数             | 说明          | 类型      | 可选值        | 默认值  |
+|-----------------|-------------- |---------- |------------ |-------- |
+| date            | 单元格代表的日期 | Date      | —           | —      |
+| data            | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd    | Object      | —           | —      |

package/docs/pitElementUi/card.md

@@ -0,0 +1,170 @@
+## Card 卡片
+将信息聚合在卡片容器中展示。
+
+### 基础用法
+
+
+包含标题，内容和操作。
+
+:::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
+```html
+<el-card class="box-card">
+  <div slot="header" class="clearfix">
+    <span>卡片名称</span>
+    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+  </div>
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'列表内容 ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### 简单卡片
+
+卡片可以只有内容区域。
+
+:::demo
+```html
+<el-card class="box-card">
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'列表内容 ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### 带图片
+
+可配置定义更丰富的内容展示。
+
+:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
+```html
+<el-row>
+  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
+    <el-card :body-style="{ padding: '0px' }">
+      <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 clearfix">
+          <time class="time">{{ currentDate }}</time>
+          <el-button type="text" class="button">操作按钮</el-button>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+<style>
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+  
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+</script>
+```
+:::
+
+### 卡片阴影
+
+可对阴影的显示进行配置。
+
+:::demo 通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      总是显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      鼠标悬浮时显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      从不显示
+    </el-card>
+  </el-col>
+</el-row>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
+| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
+| shadow | 设置阴影显示时机 | string | always / hover / never | always |

package/docs/pitElementUi/carousel.md

@@ -0,0 +1,212 @@
+## Carousel 走马灯
+
+在有限空间内，循环播放同一类型的图片、文字等内容
+
+### 基础用法
+
+适用广泛的基础用法
+
+:::demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">默认 Hover 指示器触发</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Click 指示器触发</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 指示器
+
+可以将指示器的显示位置设置在容器外部
+
+:::demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
+```html
+<template>
+  <el-carousel indicator-position="outside">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 切换箭头
+可以设置切换箭头的显示时机
+
+:::demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
+```html
+<template>
+  <el-carousel :interval="5000" arrow="always">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 卡片化
+当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
+
+:::demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6" :key="item">
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 方向
+默认情况下，`direction` 为 `horizontal`。通过设置 `direction` 为 `vertical` 来让走马灯在垂直方向上显示。
+:::demo
+```html
+<template>
+  <el-carousel height="200px" direction="vertical" :autoplay="false">
+    <el-carousel-item v-for="item in 3" :key="item">
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Carousel Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | 走马灯的高度 | string | — | — |
+| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0 |
+| trigger | 指示器的触发方式 | string | click | — |
+| autoplay | 是否自动切换 | boolean | — | true |
+| interval | 自动切换的时间间隔，单位为毫秒 | number | — | 3000 |
+| indicator-position | 指示器的位置 | string | outside/none | — |
+| arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
+| type | 走马灯的类型 | string | card | — |
+| loop | 是否循环显示 | boolean | - | true |
+| direction | 走马灯展示的方向 | string | horizontal/vertical | horizontal |
+
+### Carousel Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|---------|---------|
+| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |
+
+### Carousel Methods
+| 方法名      | 说明          | 参数 |
+|---------- |-------------- | -- |
+| setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值 |
+| prev | 切换至上一张幻灯片 | — |
+| next | 切换至下一张幻灯片 | — |
+
+### Carousel-Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | — |
+| label | 该幻灯片所对应指示器的文本 | string | — | — |