pit-docs-mcp 1.0.2

package/docs/pitElementUi/tabs.md

@@ -0,0 +1,303 @@
+## Tabs 标签页
+
+分隔内容上有关联但属于不同类别的数据集合。
+
+### 基础用法
+
+基础的、简洁的标签页。
+
+:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
+
+```html
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'second'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 选项卡样式
+
+选项卡样式的标签页。
+
+:::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。
+
+```html
+<template>
+  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 卡片化
+
+卡片化的标签页。
+
+:::demo 将`type`设置为`border-card`。
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+  <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+</el-tabs>
+```
+:::
+
+### 位置
+
+可以通过 `tab-position` 设置标签的位置
+
+:::demo 标签一共有四个方向的设置 `tabPosition="left|right|top|bottom"`
+
+```html
+<template>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">top</el-radio-button>
+    <el-radio-button label="right">right</el-radio-button>
+    <el-radio-button label="bottom">bottom</el-radio-button>
+    <el-radio-button label="left">left</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabPosition: 'left'
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 自定义标签页
+
+可以通过具名 `slot` 来实现自定义标签页的内容
+
+:::demo
+```html
+<el-tabs type="border-card">
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
+    我的行程
+  </el-tab-pane>
+  <el-tab-pane label="消息中心">消息中心</el-tab-pane>
+  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+</el-tabs>
+```
+:::
+
+### 动态增减标签页
+
+增减标签页按钮只能在选项卡样式的标签页下使用
+
+:::demo
+```html
+<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
+  <el-tab-pane
+    :key="item.name"
+    v-for="(item, index) in editableTabs"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue: '2',
+        editableTabs: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2
+      }
+    },
+    methods: {
+      handleTabsEdit(targetName, action) {
+        if (action === 'add') {
+          let newTabName = ++this.tabIndex + '';
+          this.editableTabs.push({
+            title: 'New Tab',
+            name: newTabName,
+            content: 'New Tab content'
+          });
+          this.editableTabsValue = newTabName;
+        }
+        if (action === 'remove') {
+          let tabs = this.editableTabs;
+          let activeName = this.editableTabsValue;
+          if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+              if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                  activeName = nextTab.name;
+                }
+              }
+            });
+          }
+          
+          this.editableTabsValue = activeName;
+          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 自定义增加标签页触发器
+
+:::demo
+```html
+<div style="margin-bottom: 20px;">
+  <el-button
+    size="small"
+    @click="addTab(editableTabsValue)"
+  >
+    add tab
+  </el-button>
+</div>
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
+  <el-tab-pane
+    v-for="(item, index) in editableTabs"
+    :key="item.name"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue: '2',
+        editableTabs: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2
+      }
+    },
+    methods: {
+      addTab(targetName) {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs.push({
+          title: 'New Tab',
+          name: newTabName,
+          content: 'New Tab content'
+        });
+        this.editableTabsValue = newTabName;
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+        
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tabs Attributes
+| 参数       | 说明     | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
+| type     | 风格类型   | string   | card/border-card  |     —    |
+| closable  | 标签是否可关闭   | boolean   | — |  false  |
+| addable  | 标签是否可增加   | boolean   | — |  false  |
+| editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
+| tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
+| stretch  | 标签的宽度是否自撑开 | boolean   |  -  |  false |
+| before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |
+
+### Tabs Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| tab-click  | tab 被选中时触发 | 被选中的标签 tab 实例 |
+| tab-remove  | 点击 tab 移除按钮后触发  | 被删除的标签的 name |
+| tab-add  | 点击 tabs 的新增按钮后触发  | — |
+| edit  | 点击 tabs 的新增按钮或 tab 被关闭后触发  | (targetName, action) |
+
+### Tab-pane Attributes
+| 参数       | 说明     | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | 选项卡标题   | string   | — |    —     |
+| disabled | 是否禁用 | boolean | — | false |
+| name      | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
+| closable  | 标签是否可关闭   | boolean   | — |  false  |
+| lazy  | 标签是否延迟渲染   | boolean   | — |  false  |

package/docs/pitElementUi/tag.md

@@ -0,0 +1,203 @@
+## Tag 标签
+
+用于标记和选择。
+
+### 基础用法
+
+:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。
+
+```html
+<el-tag>标签一</el-tag>
+<el-tag type="success">标签二</el-tag>
+<el-tag type="info">标签三</el-tag>
+<el-tag type="warning">标签四</el-tag>
+<el-tag type="danger">标签五</el-tag>
+```
+:::
+
+### 可移除标签
+
+:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
+
+```html
+<el-tag
+  v-for="tag in tags"
+  :key="tag.name"
+  closable
+  :type="tag.type">
+  {{tag.name}}
+</el-tag>
+
+<script>
+  export default {
+    data() {
+      return {
+        tags: [
+          { name: '标签一', type: '' },
+          { name: '标签二', type: 'success' },
+          { name: '标签三', type: 'info' },
+          { name: '标签四', type: 'warning' },
+          { name: '标签五', type: 'danger' }
+        ]
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 动态编辑标签
+
+动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现
+
+:::demo
+```html
+<el-tag
+  :key="tag"
+  v-for="tag in dynamicTags"
+  closable
+  :disable-transitions="false"
+  @close="handleClose(tag)">
+  {{tag}}
+</el-tag>
+<el-input
+  class="input-new-tag"
+  v-if="inputVisible"
+  v-model="inputValue"
+  ref="saveTagInput"
+  size="small"
+  @keyup.enter.native="handleInputConfirm"
+  @blur="handleInputConfirm"
+>
+</el-input>
+<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        dynamicTags: ['标签一', '标签二', '标签三'],
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 不同尺寸
+
+Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-tag closable>默认标签</el-tag>
+<el-tag size="medium" closable>中等标签</el-tag>
+<el-tag size="small" closable>小型标签</el-tag>
+<el-tag size="mini" closable>超小标签</el-tag>
+```
+:::
+
+### 不同主题
+
+Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
+
+:::demo 通过设置`effect`属性来改变主题，默认为 `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: '标签一' },
+          { type: 'success', label: '标签二' },
+          { type: 'info', label: '标签三' },
+          { type: 'danger', label: '标签四' },
+          { type: 'warning', label: '标签五' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| type | 类型 | string | success/info/warning/danger | — |
+| closable | 是否可关闭 | boolean | — | false |
+| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
+| hit | 是否有边框描边 | boolean | — | false |
+| color | 背景色 | string | — | — |
+| size | 尺寸 | string | medium / small / mini | — |
+| effect | 主题 | string | dark / light / plain | light |
+
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| click | 点击 Tag 时触发的事件 | — |
+| close | 关闭 Tag 时触发的事件 | — |

package/docs/pitElementUi/time-picker.md

@@ -0,0 +1,199 @@
+## TimePicker 时间选择器
+
+ 用于选择或输入日期
+
+### 固定时间点
+
+提供几个固定的时间点供用户选择
+
+:::demo 使用 el-time-select 标签，分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长
+```html
+<el-time-select
+  v-model="value"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }"
+  placeholder="选择时间">
+</el-time-select>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 任意时间点
+
+可以选择任意时间
+
+:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。
+```html
+<template>
+  <el-time-picker
+    v-model="value1"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="任意时间点">
+  </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value2"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="任意时间点">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 固定时间范围
+
+若先选择开始时间，则结束时间内备选项的状态会随之改变
+
+:::demo
+```html
+<template>
+  <el-time-select
+    placeholder="起始时间"
+    v-model="startTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }">
+  </el-time-select>
+  <el-time-select
+    placeholder="结束时间"
+    v-model="endTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30',
+      minTime: startTime
+    }">
+  </el-time-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        startTime: '',
+        endTime: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 任意时间范围
+
+可选择任意的时间范围
+
+:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。
+```html
+<template>
+  <el-time-picker
+    is-range
+    v-model="value1"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    placeholder="选择时间范围">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value2"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    placeholder="选择时间范围">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
+| readonly | 完全只读 | boolean | — | false |
+| disabled | 禁用 | boolean | — | false |
+| editable | 文本框可输入 | boolean | — | true |
+| clearable | 是否显示清除按钮 | boolean | — | true |
+| size          | 输入框尺寸     | string          | medium / small / mini  | — |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
+| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
+| align | 对齐方式 | string | left / center / right | left |
+| popper-class | TimePicker 下拉框的类名 | string | — | — |
+| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
+| range-separator | 选择范围时的分隔符 | string | - | '-' |
+| value-format | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
+| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
+| name | 原生属性 | string | — | — |
+| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
+| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
+
+### Time Select Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| start | 开始时间 | string | — | 09:00 |
+| end | 结束时间 | string | — | 18:00 |
+| step | 间隔时间 | string | — | 00:30 |
+| minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
+| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
+
+### Time Picker Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
+| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss' |
+
+### Events
+| 事件名 | 说明 | 参数 |
+|---------|--------|---------|
+| change | 用户确认选定的值时触发 | 组件绑定值 |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |