pit-docs-mcp 1.0.2

package/docs/pitElementUi/drawer.md

@@ -0,0 +1,307 @@
+## Drawer 抽屉
+
+有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 API, 在 UI 上带来不一样的体验.
+
+### 基本用法
+
+呼出一个临时的侧边栏, 可以从多个方向呼出
+
+:::demo 需要设置 `visible` 属性，它的**类型**是 `boolean`,当为 **true** 时显示 Drawer。Drawer 分为两个部分：`title` 和 `body`，`title` 需要具名为 **title** 的 `slot`, 也可以通过 `title` 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 `direction`, 详细请参考 `direction` 用法 最后，本例还展示了 `before-close` 的用法
+
+```html
+<el-radio-group v-model="direction">
+  <el-radio label="ltr">从左往右开</el-radio>
+  <el-radio label="rtl">从右往左开</el-radio>
+  <el-radio label="ttb">从上往下开</el-radio>
+  <el-radio label="btt">从下往上开</el-radio>
+</el-radio-group>
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  点我打开
+</el-button>
+
+<el-drawer
+  title="我是标题"
+  :visible.sync="drawer"
+  :direction="direction"
+  :before-close="handleClose">
+  <span>我来啦!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        direction: 'rtl',
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 不添加 Title
+
+当你不需要标题到时候, 你还可以去掉标题
+
+:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值
+
+```html
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  点我打开
+</el-button>
+
+<el-drawer
+  title="我是标题"
+  :visible.sync="drawer"
+  :with-header="false">
+  <span>我来啦!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### 自定义内容
+
+和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
+
+:::demo
+
+```html
+<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
+<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
+<el-drawer
+  title="我嵌套了表格!"
+  :visible.sync="table"
+  direction="rtl"
+  size="50%">
+   <el-table :data="gridData">
+      <el-table-column property="date" label="日期" width="150"></el-table-column>
+      <el-table-column property="name" label="姓名" width="200"></el-table-column>
+      <el-table-column property="address" label="地址"></el-table-column>
+    </el-table>
+</el-drawer>
+
+<el-drawer
+  title="我嵌套了 Form !"
+  :before-close="handleClose"
+  :visible.sync="dialog"
+  direction="ltr"
+  custom-class="demo-drawer"
+  ref="drawer"
+  >
+  <div class="demo-drawer__content">
+    <el-form :model="form">
+      <el-form-item label="活动名称" :label-width="formLabelWidth">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域" :label-width="formLabelWidth">
+        <el-select v-model="form.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="demo-drawer__footer">
+      <el-button @click="cancelForm">取 消</el-button>
+      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+    </div>
+  </div>
+</el-drawer>
+
+<script>
+export default {
+  data() {
+    return {
+      table: false,
+      dialog: false,
+      loading: false,
+      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 弄'
+      }],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '80px',
+      timer: null,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('确定要提交表单吗？')
+        .then(_ => {
+          this.loading = true;
+          this.timer = setTimeout(() => {
+            done();
+            // 动画关闭需要一定的时间
+            setTimeout(() => {
+              this.loading = false;
+            }, 400);
+          }, 2000);
+        })
+        .catch(_ => {});
+    },
+    cancelForm() {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    }
+  }
+}
+</script>
+```
+:::
+
+### 多层嵌套
+
+`Drawer` 组件也拥有多层嵌套的方法
+
+:::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**
+
+```html
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  点我打开
+</el-button>
+
+<el-drawer
+  title="我是外面的 Drawer"
+  :visible.sync="drawer"
+  size="50%">
+  <div>
+   <el-button @click="innerDrawer = true">打开里面的!</el-button>
+   <el-drawer
+     title="我是里面的"
+     :append-to-body="true"
+     :before-close="handleClose"
+     :visible.sync="innerDrawer">
+     <p>_(:зゝ∠)_</p>
+   </el-drawer>
+  </div>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        innerDrawer: false,
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('还有未保存的工作哦确定关闭吗？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+```
+:::
+
+:::tip
+
+Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
+
+:::
+
+:::tip
+
+Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性
+
+:::
+
+:::tip
+
+如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Drawer 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
+
+:::
+
+### Drawer Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| append-to-body     | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true   | boolean   | — | false |
+| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean    | — | true |
+| custom-class      | Drawer 的自定义类名 | string    | — | — |
+| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
+| modal     | 是否需要遮罩层   | boolean   | — | true |
+| modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上   | boolean   | — | true |
+| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl |
+| show-close | 是否显示关闭按钮 | boolean    | — | true |
+| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |
+| title     | Drawer 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |
+| visible   | 是否显示 Drawer，支持 .sync 修饰符 | boolean | — | false |
+| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
+| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
+
+### Drawer Slot
+
+| name | 说明 |
+|------|--------|
+| — | Drawer 的内容 |
+| title | Drawer 标题区的内容 |
+
+### Drawer Methods
+
+| name | 说明 |
+| ---- | ---  |
+| closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |
+
+### Drawer Events
+
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| open  | Drawer 打开的回调 | — |
+| opened  | Drawer 打开动画结束时的回调 | — |
+| close  | Drawer 关闭的回调 | — |
+| closed | Drawer 关闭动画结束时的回调 | — |

package/docs/pitElementUi/dropdown.md

@@ -0,0 +1,308 @@
+## Dropdown 下拉菜单
+
+将动作或菜单折叠到下拉菜单中。
+
+### 基础用法
+
+移动到下拉菜单上，展开更多操作。
+
+:::demo 通过组件`slot`来设置下拉触发的元素以及需要通过具名`slot`为`dropdown` 来设置下拉菜单。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
+
+```html
+<el-dropdown>
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+```
+:::
+
+### 触发对象
+
+可使用按钮触发下拉菜单。
+
+:::demo 设置`split-button`属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为`true`即可。
+
+```html
+<el-dropdown>
+  <el-button type="primary">
+    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
+  </el-button>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<el-dropdown split-button type="primary" @click="handleClick">
+  更多菜单
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### 触发方式
+
+可以配置 click 激活或者 hover 激活。
+
+:::demo 在`trigger`属性设置为`click`即可。
+```html
+<el-row class="block-col-2">
+  <el-col :span="12">
+    <span class="demonstration">hover 激活</span>
+    <el-dropdown>
+      <span class="el-dropdown-link">
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+  <el-col :span="12">
+    <span class="demonstration">click 激活</span>
+    <el-dropdown trigger="click">
+      <span class="el-dropdown-link">
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+</el-row>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+```
+:::
+
+### 菜单隐藏方式
+
+可以`hide-on-click`属性来配置。
+
+:::demo 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+```
+:::
+
+### 指令事件
+
+点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+    <el-dropdown-item command="b">狮子头</el-dropdown-item>
+    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 不同尺寸
+
+Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-dropdown split-button type="primary">
+  默认尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  中等尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  小型尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  超小尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
+### Dropdown Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
+| size          | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
+| split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
+| placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
+| trigger       | 触发下拉的行为     | string          | hover, click  | hover |
+| hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
+| show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
+| hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |
+| tabindex      | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
+| disabled      | 是否禁用        | boolean         | —                      | false |
+
+### Dropdown Slots
+
+| Name | 说明 |
+|------|--------|
+| — | 触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件  |
+| dropdown | 下拉列表，通常是 `<el-dropdown-menu>` 组件     |
+
+### Dropdown Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| click  | `split-button` 为 true 时，点击左侧按钮的回调 | — |
+| command  | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
+| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
+
+### Dropdown Menu Item Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| command       | 指令     | string/number/object          | — | — |
+| disabled      | 禁用     | boolean          | — | false |
+| divided       | 显示分割线     | boolean          | — | false |
+| icon          | 图标类名 | string   |  —  |  —  |

package/docs/pitElementUi/empty.md

@@ -0,0 +1,61 @@
+## Empty 空状态
+
+空状态时的占位提示。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-empty description="描述文字"></el-empty>
+```
+:::
+
+### 自定义图片
+
+通过设置 `image` 属性传入图片 URL。
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### 图片尺寸
+
+通过设置 `image-size` 属性来控制图片大小。
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### 底部内容
+
+使用默认插槽可在底部插入内容。
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">按钮</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | 图片地址         | string  |          —             |    —     |
+| image-size    | 图片大小（宽度）  | number | — |    —  |
+| description  | 文本描述    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | 说明 |
+|------|--------|
+| default | 自定义底部内容  |
+| image | 自定义图片     |
+| description | 自定义描述文字     |