pit-docs-mcp 1.0.2

package/docs/pitElementUi/notification.md

@@ -0,0 +1,311 @@
+## Notification 通知
+
+悬浮出现在页面角落，显示全局的通知提醒消息。
+
+### 基本用法
+
+适用性广泛的通知栏
+
+:::demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
+```html
+<template>
+  <el-button
+    plain
+    @click="open1">
+    可自动关闭
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    不会自动关闭
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        const h = this.$createElement;
+
+        this.$notify({
+          title: '标题名称',
+          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条不会自动关闭的消息',
+          duration: 0
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 带有倾向性
+
+带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
+
+:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open3`和`open4`那样直接调用。
+```html
+<template>
+  <el-button
+    plain
+    @click="open1">
+    成功
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    警告
+  </el-button>
+  <el-button
+    plain
+    @click="open3">
+    消息
+  </el-button>
+  <el-button
+    plain
+    @click="open4">
+    错误
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        this.$notify({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          type: 'success'
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: '警告',
+          message: '这是一条警告的提示消息',
+          type: 'warning'
+        });
+      },
+
+      open3() {
+        this.$notify.info({
+          title: '消息',
+          message: '这是一条消息的提示消息'
+        });
+      },
+
+      open4() {
+        this.$notify.error({
+          title: '错误',
+          message: '这是一条错误的提示消息'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 自定义弹出位置
+
+可以让 Notification 从屏幕四角中的任意一角弹出
+
+:::demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。
+```html
+<template>
+  <el-button
+    plain
+    @click="open1">
+    右上角
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    右下角
+  </el-button>
+  <el-button
+    plain
+    @click="open3">
+    左下角
+  </el-button>
+  <el-button
+    plain
+    @click="open4">
+    左上角
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右上角弹出的消息'
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右下角弹出的消息',
+          position: 'bottom-right'
+        });
+      },
+
+      open3() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左下角弹出的消息',
+          position: 'bottom-left'
+        });
+      },
+
+      open4() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左上角弹出的消息',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 带有偏移
+
+让 Notification 偏移一些位置
+
+:::demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    偏移的消息
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify({
+          title: '偏移',
+          message: '这是一条带有偏移的提示消息',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 使用 HTML 片段
+`message` 属性支持传入 HTML 片段
+
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    使用 HTML 片段
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify({
+          title: 'HTML 片段',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
+### 隐藏关闭按钮
+
+可以不显示关闭按钮
+
+:::demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    隐藏关闭按钮
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify.success({
+          title: 'Info',
+          message: '这是一条没有关闭按钮的消息',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 全局方法
+
+Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
+
+### 单独引用
+
+单独引入 Notification：
+
+```javascript
+import { Notification } from 'element-ui';
+```
+
+此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。并且可以调用 `Notification.closeAll()` 手动关闭所有实例。
+
+### Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | 标题 | string | — | — |
+| message | 说明文字 | string/Vue.VNode | — | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
+| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
+| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
+| customClass | 自定义类名 | string | — | — |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
+| position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |
+| showClose | 是否显示关闭按钮 | boolean | — | true |
+| onClose | 关闭时的回调函数 | function | — | — |
+| onClick | 点击 Notification 时的回调函数 | function | — | — |
+| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
+
+### 方法
+调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
+| 方法名 | 说明 |
+| ---- | ---- |
+| close | 关闭当前的 Notification |

package/docs/pitElementUi/page-header.md

@@ -0,0 +1,40 @@
+## PageHeader 页头
+
+如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
+
+### 基础
+
+:::demo
+```html
+<el-page-header @back="goBack" content="详情页面">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | 标题           | string    |  —                            | 返回   |
+| content   | 内容           | string    |  —                            | —      |
+
+
+### Events
+| 事件名称   | 说明           | 回调参数   |
+|---------- |-------------- |---------- |
+| back      | 点击左侧区域触发 | —        |
+
+### Slots
+| 事件名称    | 说明         |
+|---------- |------------- |
+| title     | 标题内容      |
+| content   | 内容         |

package/docs/pitElementUi/pagination.md

@@ -0,0 +1,200 @@
+## Pagination 分页
+
+当数据量过多时，使用分页分解数据。
+
+### 基础用法
+
+:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`size`用于设置每页显示的页码数量。
+```html
+<div class="block">
+  <span class="demonstration">页数较少时的效果</span>
+  <el-pagination
+    layout="prev, pager, next"
+    :total="50">
+  </el-pagination>
+</div>
+<div class="block">
+  <span class="demonstration">大于 7 页时的效果</span>
+  <el-pagination
+    layout="prev, pager, next"
+    :total="1000">
+  </el-pagination>
+</div>
+```
+:::
+
+### 设置最大页码按钮数
+
+:::demo 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### 带有背景色的分页
+
+:::demo 设置`background`属性可以为分页按钮添加背景色。
+```html
+<el-pagination
+  background
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### 小型分页
+
+在空间有限的情况下，可以使用简单的小型分页。
+
+:::demo 只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
+```html
+<el-pagination
+  small
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+```
+:::
+
+### 附加功能
+
+根据场景需要，可以添加其他功能模块。
+
+:::demo 此例是一个完整的用例，使用了`size-change`和`current-change`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">显示总数</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage1"
+      :page-size="100"
+      layout="total, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">调整每页显示条数</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage2"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="sizes, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">直接前往</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage3"
+      :page-size="100"
+      layout="prev, pager, next, jumper"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">完整功能</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400">
+    </el-pagination>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+    },
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 当只有一页时隐藏分页
+
+当只有一页时，通过设置 `hide-on-single-page` 属性来隐藏分页。
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: false
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| small | 是否使用小型分页样式 | boolean | — | false |
+| background | 是否为分页按钮添加背景色 | boolean | — | false |
+| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |
+| total | 总条目数 | number | — | — |
+| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
+| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
+| current-page | 当前页数，支持 .sync 修饰符 | number | — | 1 |
+| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
+| page-sizes | 每页显示个数选择器的选项设置 | number[] | — |  [10, 20, 30, 40, 50, 100] |
+| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
+| prev-text | 替代图标显示的上一页文字 | string | — | — |
+| next-text | 替代图标显示的下一页文字 | string | — | — |
+| disabled | 是否禁用 | boolean | — | false |
+| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| size-change | pageSize 改变时会触发 | 每页条数 |
+| current-change | currentPage 改变时会触发 | 当前页 |
+| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
+| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义内容，需要在 `layout` 中列出 `slot` |

package/docs/pitElementUi/popconfirm.md

@@ -0,0 +1,60 @@
+## Popconfirm 气泡确认框
+
+点击元素，弹出气泡确认框。
+
+### 基础用法
+
+Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
+:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。
+```html
+<template>
+<el-popconfirm
+  title="这是一段内容确定删除吗？"
+>
+  <el-button slot="reference">删除</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### 自定义
+
+可以在 Popconfirm 中自定义内容。
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirm-button-text='好的'
+  cancel-button-text='不用了'
+  icon="el-icon-info"
+  icon-color="red"
+  title="这是一段内容确定删除吗？"
+>
+  <el-button slot="reference">删除</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | 标题 | String | — | — |
+|  confirm-button-text              | 确认按钮文字 | String | — | — |
+|  cancel-button-text              | 取消按钮文字 | String | — | — |
+|  confirm-button-type              | 确认按钮类型 | String | — | Primary |
+|  cancel-button-type              | 取消按钮类型 | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  icon-color              | Icon 颜色 | String | — | #f90 |
+|  hide-icon              | 是否隐藏 Icon | Boolean | — | false |
+
+### Slot
+| 参数 | 说明 |
+|--- | ---|
+| reference | 触发 Popconfirm 显示的 HTML 元素 |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| confirm | 点击确认按钮时触发 | — |
+| cancel | 点击取消按钮时触发 | — |