pit-docs-mcp 1.0.2

package/docs/pitElementUi/popover.md

@@ -0,0 +1,167 @@
+## Popover 弹出框
+
+### 基础用法
+Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
+
+:::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。
+```html
+<template>
+  <el-popover
+    placement="top-start"
+    title="标题"
+    width="200"
+    trigger="hover"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+    <el-button slot="reference">hover 激活</el-button>
+  </el-popover>
+
+  <el-popover
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="click"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+    <el-button slot="reference">click 激活</el-button>
+  </el-popover>
+
+  <el-popover
+    ref="popover"
+    placement="right"
+    title="标题"
+    width="200"
+    trigger="focus"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+  </el-popover>
+  <el-button v-popover:popover>focus 激活</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="manual"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 嵌套信息
+
+可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
+
+:::demo 利用分发取代`content`属性
+```html
+<el-popover
+  placement="right"
+  width="400"
+  trigger="click">
+  <el-table :data="gridData">
+    <el-table-column width="150" property="date" label="日期"></el-table-column>
+    <el-table-column width="100" property="name" label="姓名"></el-table-column>
+    <el-table-column width="300" property="address" label="地址"></el-table-column>
+  </el-table>
+  <el-button slot="reference">click 激活</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 嵌套操作
+
+当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
+
+:::demo
+```html
+<el-popover
+  placement="top"
+  width="160"
+  v-model="visible">
+  <p>这是一段内容这是一段内容确定删除吗？</p>
+  <div style="text-align: right; margin: 0">
+    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
+  </div>
+  <el-button slot="reference">删除</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false,
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| trigger | 触发方式 | String  | click/focus/hover/manual |    click    |
+|  title              | 标题 | String | — | — |
+|  content        |  显示的内容，也可以通过 `slot` 传入 DOM   | String            | — | — |
+|  width        |  宽度  | String, Number            | — | 最小宽度 150px |
+|  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  disabled       |  Popover 是否可用  | Boolean           | — |  false |
+|  value / v-model        |  状态是否可见  | Boolean           | — |  false |
+|  offset        |  出现位置的偏移量  | Number           | — |  0 |
+|  transition     |  定义渐变动画      | String             | — | fade-in-linear |
+|  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
+|  popper-options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-class | 为 popper 添加类名 | String | — | — |
+| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
+| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
+| tabindex   | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
+
+### Slot
+| 参数 | 说明 |
+|--- | ---|
+| — | Popover 内嵌 HTML 文本 |
+| reference | 触发 Popover 显示的 HTML 元素 |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| show | 显示时触发 | — |
+| after-enter | 显示动画播放完毕后触发 | — |
+| hide | 隐藏时触发 | — |
+| after-leave | 隐藏动画播放完毕后触发 | — |

package/docs/pitElementUi/progress.md

@@ -0,0 +1,178 @@
+## Progress 进度条
+
+用于展示操作进度，告知用户当前状态和预期。
+
+### 线形进度条
+
+:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。
+
+```html
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
+<el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
+<el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? '满' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 百分比内显
+
+百分比不占用额外控件，适用于文件上传等场景。
+
+:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
+
+```html
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 自定义颜色
+
+可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#909399';
+        } else if (percentage < 70) {
+          return '#e6a23c';
+        } else {
+          return '#67c23a';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 环形进度条
+
+Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
+
+:::demo
+
+```html
+<el-progress type="circle" :percentage="0"></el-progress>
+<el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
+<el-progress type="circle" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 仪表盘形进度条
+
+:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
+
+```html
+
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| **percentage** | **百分比（必填）**   | number         |     0-100          |     0    |
+| type          | 进度条类型           | string         | line/circle/dashboard | line |
+| stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
+| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
+| status  | 进度条当前状态 | string | success/exception/warning | — |
+| color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
+| width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |
+| show-text  | 是否显示进度条文字内容 | boolean | — | true |
+| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
+| format  | 指定进度条文字内容 | function(percentage) | — | — |

package/docs/pitElementUi/quickstart.md

@@ -0,0 +1,290 @@
+## 快速上手
+
+本节将介绍如何在项目中使用 Element。
+
+### 使用 vue-cli@3
+
+我们为新版的 vue-cli 准备了相应的 [Element 插件](https://github.com/ElementUI/vue-cli-plugin-element)，你可以用它们快速地搭建一个基于 Element 的项目。
+
+### 使用 Starter Kit
+
+我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于 Laravel 用户，我们也准备了相应的[模板](https://github.com/ElementUI/element-in-laravel-starter)，同样可以直接下载使用。
+
+如果不希望使用我们提供的模板，请继续阅读。
+
+### 引入 Element
+
+你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
+
+#### 完整引入
+
+在 main.js 中写入以下内容：
+
+```javascript
+import Vue from 'vue';
+import ElementUI from 'pit-element-ui';
+import 'pit-element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
+
+#### 按需引入
+
+借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。
+
+首先，安装 babel-plugin-component：
+
+```bash
+npm install babel-plugin-component -D
+```
+
+然后，将 .babelrc 修改为：
+
+```json
+{
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}
+```
+
+接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
+
+```javascript
+import Vue from 'vue';
+import { Button, Select } from 'element-ui';
+import App from './App.vue';
+
+Vue.component(Button.name, Button);
+Vue.component(Select.name, Select);
+/* 或写为
+ * Vue.use(Button)
+ * Vue.use(Select)
+ */
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
+
+```javascript
+import Vue from 'vue';
+import {
+  Pagination,
+  Dialog,
+  Autocomplete,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxButton,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  ButtonGroup,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Slider,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Spinner,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
+  Loading,
+  MessageBox,
+  Message,
+  Notification
+} from 'element-ui';
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Spinner);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+Vue.use(Calendar);
+Vue.use(Backtop);
+Vue.use(PageHeader);
+Vue.use(CascaderPanel);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
+```
+
+### 全局配置
+
+在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
+
+完整引入 Element：
+
+```js
+import Vue from 'vue';
+import Element from 'element-ui';
+Vue.use(Element, { size: 'small', zIndex: 3000 });
+```
+
+按需引入 Element：
+
+```js
+import Vue from 'vue';
+import { Button } from 'element-ui';
+
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
+Vue.use(Button);
+```
+
+按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
+
+### 开始使用
+
+至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
+
+### 使用 Nuxt.js
+
+我们还可以使用 [Nuxt.js](https://nuxtjs.org)：
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+