文档更新

master
toesbieya 6 years ago
parent 4d2cf28cc6
commit 3de9fc9cc2
  1. 1
      docs/.vuepress/config.js
  2. BIN
      docs/.vuepress/public/tree-select_multiple.png
  3. BIN
      docs/.vuepress/public/tree-select_single.png
  4. 5
      docs/frontend/README.md
  5. 49
      docs/frontend/components/tree-select.md
  6. 5
      docs/frontend/layout.md

@ -40,6 +40,7 @@ module.exports = {
'/frontend/components/region-selector', '/frontend/components/region-selector',
'/frontend/components/search-form', '/frontend/components/search-form',
'/frontend/components/upload-file', '/frontend/components/upload-file',
'/frontend/components/tree-select',
] ]
}, },
{ {

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

@ -41,7 +41,7 @@
## 目录结构 ## 目录结构
``` ```
├── element-ui-personal # element-ui增强 ├── element-ui-personal # element-ui增强
├── mock # 项目mock,需打开devServer.before的注释 ├── mock # 项目mock
├── public # 静态资源文件夹 ├── public # 静态资源文件夹
├── src ├── src
│ ├── api # 数据请求集合 │ ├── api # 数据请求集合
@ -55,7 +55,8 @@
│ │ └── request.js # axios封装 │ │ └── request.js # axios封装
│ ├── directive # 自定义指令集合 │ ├── directive # 自定义指令集合
│ ├── filters # 自定义过滤器集合 │ ├── filters # 自定义过滤器集合
│ ├── layout # 布局文件夹,包含了导航栏、侧边栏、多页签、全局页脚、页面 │ ├── globalMethods # 全局方法,使用this.$xx调用
│ ├── layout # 布局文件夹,包含了导航栏、侧边栏、多页签、全局页脚
│ ├── mixins # 公用混入 │ ├── mixins # 公用混入
│ ├── plugin # 一些插件,均使用import()来动态引入 │ ├── plugin # 一些插件,均使用import()来动态引入
│ ├── router │ ├── router

@ -0,0 +1,49 @@
# 树选择
基于 `<el-select>``<el-tree>`,实现单选和多选。
<div style="display: flex;justify-content: space-between">
<img :src="$withBase('/tree-select_single.png')">
<img :src="$withBase('/tree-select_multiple.png')" style="margin-left: 20px">
</div>
### 引入:
`@/components/TreeSelect`
### 使用:
```html
<tree-select v-model="value" :data="data"/>
```
### TreeSelect Attributes:
| 参数 | 说明 | 类型 | 默认 |
| :-----------------: | :-------------------------------------: | :--------: | :---: |
| value / v-model | 绑定值,多选时需要是array类型 | - | - |
| data | 等同于`el-tree`的`data ` | - | - |
| multiple | 是否多选 | `boolean` | - |
| disabled | 等同于`el-select` | `boolean` | - |
| size | 等同于`el-select` | `string` | - |
| clearable | 等同于`el-select` | `boolean` | true |
| placeholder | 等同于`el-select` | `string` | - |
| filterable | 是否显示用于筛选的输入框 | `boolean` | - |
| filter-method | 等同于`el-tree`的`filter-node-method` | `function` | - |
| node-key | 等同于`el-tree` | `string` | 'id' |
| props | 等同于`el-tree` | `object` | - |
| accordion | 等同于`el-tree` | `boolean` | true |
| popperAppendToBody | 等同于`el-select` | `boolean` | - |
| automaticDropdown | 等同于`el-select` | `boolean` | - |
### TreeSelect Events:
| 事件名称 | 说明 |
| :------: | :---------------: |
| input | 等同于`el-select` |
| change | 等同于`el-select` |
::: tip
使用多选时,如果value数组中有父节点但无子节点,会出现看上去父子全选中,但实际只选了父节点的情况
:::

@ -35,8 +35,9 @@
重复点击菜单可刷新路由,折叠时可以选择是否在折叠菜单上显示父级。 重复点击菜单可刷新路由,折叠时可以选择是否在折叠菜单上显示父级。
侧边栏的滚动分两种情况,一种是整体的滚动,这是用 `<el-scrollbar>` 做的,不过缺点就是移动端体验不好。 侧边栏的滚动分两种情况,一种是整体的滚动,这是用 `<el-scrollbar>` 做的。
另一种是弹出菜单的滚动,这是用 `css` 做的,不用 `<el-scrollbar>` 是因为没办法避免bug,具体原因可以去看element-ui的 `submenu #handleMouseleave` 另一种是弹出菜单的滚动,这是用 `css` 做的,不用 `<el-scrollbar>` 是因为没办法避免bug,
具体原因可以去看element-ui的 `<submenu> #handleMouseleave`
## 全局页脚 ## 全局页脚

Loading…
Cancel
Save