pit-docs-mcp 1.0.2

package/docs/pitElementUi/layout.md

@@ -0,0 +1,354 @@
+## Layout 布局
+
+通过基础的 24 分栏，迅速简便地创建布局。
+
+### 基础布局
+
+使用单一分栏创建基础的栅格布局。
+
+:::demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
+```html
+<el-row>
+  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### 分栏间隔
+
+分栏之间存在间隔。
+
+:::demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### 混合布局
+
+通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
+
+:::demo
+```html
+<el-row :gutter="20">
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### 分栏偏移
+
+支持偏移指定的栏数。
+
+:::demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### 对齐方式
+
+通过 `flex` 布局来对分栏进行灵活的对齐。
+
+:::demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
+```html
+<el-row type="flex" class="row-bg">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="center">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="end">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="space-between">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="space-around">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### 响应式布局
+
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
+
+:::demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
+### 基于断点的隐藏类
+
+Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
+
+```js
+import 'element-ui/lib/theme-chalk/display.css';
+```
+
+包含的类名及其含义为：
+- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
+- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
+- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
+- `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏
+- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
+- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
+- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
+- `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
+- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
+- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
+- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏
+
+### Row Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| gutter | 栅格间隔 | number | — | 0 |
+| type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
+| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
+| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | — |
+| tag | 自定义元素标签 | string | * | div |
+
+### Col Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| span | 栅格占据的列数 | number | — | 24 |
+| offset | 栅格左侧的间隔格数 | number | — | 0 |
+| push |  栅格向右移动格数 | number | — | 0 |
+| pull |  栅格向左移动格数 | number | — | 0 |
+| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| tag | 自定义元素标签 | string | * | div |

package/docs/pitElementUi/link.md

@@ -0,0 +1,66 @@
+## Link 文字链接
+
+文字超链接
+
+### 基础用法
+基础的文字链接用法。
+:::demo
+```html
+<div>
+  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
+  <el-link type="primary">主要链接</el-link>
+  <el-link type="success">成功链接</el-link>
+  <el-link type="warning">警告链接</el-link>
+  <el-link type="danger">危险链接</el-link>
+  <el-link type="info">信息链接</el-link>
+</div>
+```
+:::
+
+### 禁用状态
+文字链接不可用状态。
+:::demo
+```html
+<div>
+  <el-link disabled>默认链接</el-link>
+  <el-link type="primary" disabled>主要链接</el-link>
+  <el-link type="success" disabled>成功链接</el-link>
+  <el-link type="warning" disabled>警告链接</el-link>
+  <el-link type="danger" disabled>危险链接</el-link>
+  <el-link type="info" disabled>信息链接</el-link>
+</div>
+```
+:::
+
+### 下划线
+文字链接下划线。
+:::demo
+```html
+<div>
+  <el-link :underline="false">无下划线</el-link>
+  <el-link>有下划线</el-link>
+</div>
+```
+:::
+
+### 图标
+
+带图标的文字链接可增强辨识度。
+:::demo
+```html
+<div>
+  <el-link icon="el-icon-edit">编辑</el-link>
+  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
+</div>
+```
+:::
+
+### Attributes
+
+| 参数           | 说明                           | 类型      | 可选值                               | 默认值  |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| type           | 类型                   | string  | primary / success / warning / danger / info | default |
+| underline      | 是否下划线                         | boolean | —                                    | true    |
+| disabled       | 是否禁用状态                       | boolean | —                                    | false   |
+| href           | 原生 href 属性                     | string  | —                                    | -       |
+| icon           | 图标类名                       | string  | —                                    | -       |

package/docs/pitElementUi/loading.md

@@ -0,0 +1,208 @@
+## Loading 加载
+
+加载数据时显示动效。
+
+### 区域加载
+
+在表格等容器中加载数据时显示。
+
+:::demo Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。
+```html
+<template>
+  <el-table
+    v-loading="loading"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        loading: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 自定义
+
+可自定义加载文案、图标和背景色。
+
+:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。
+```html
+<template>
+  <el-table
+    v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+        loading: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 整页加载
+
+页面数据加载时显示。
+
+:::demo 当使用指令方式时，全屏遮罩需要添加`fullscreen`修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用`lock`修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
+
+```html
+<template>
+  <el-button
+    type="primary"
+    @click="openFullScreen1"
+    v-loading.fullscreen.lock="fullscreenLoading">
+    指令方式
+  </el-button>
+  <el-button
+    type="primary"
+    @click="openFullScreen2">
+    服务方式
+  </el-button>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        fullscreenLoading: false
+      }
+    },
+    methods: {
+      openFullScreen1() {
+        this.fullscreenLoading = true;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 服务
+Loading 还可以以服务的方式调用。引入 Loading 服务：
+```javascript
+import { Loading } from 'element-ui';
+```
+在需要调用时：
+```javascript
+Loading.service(options);
+```
+其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
+```javascript
+let loadingInstance = Loading.service(options);
+this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
+  loadingInstance.close();
+});
+```
+需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
+
+如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
+
+### Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
+| body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
+| fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
+| lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
+| text | 显示在加载图标下方的加载文案 | string | — | — |
+| spinner | 自定义加载图标类名 | string | — | — |
+| background | 遮罩背景色 | string | — | — |
+| customClass | Loading 的自定义类名 | string | — | — |