Skip to content

Commit

Permalink
docs: update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
sendya committed Jun 23, 2019
1 parent dea146c commit 161934d
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 46 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ yarn run lint
- [Vue-cli3](https://cli.vuejs.org/guide/) used by the project.
- Disable Eslint (not recommended): remove `eslintConfig` field in `package.json` and `vue.config.js` field `lintOnSave: false`

- Load on Demand: modify `/src/main.js` L7, append `import './core/lazy_use'` code.
- Load on Demand: modify `/src/main.js` L14, replace to `import './core/lazy_use'` code.

- Customize Theme: `vue.config.js`
eg:
Expand Down
12 changes: 3 additions & 9 deletions docs/load-on-demand.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

2. 修改引入组件方式 (注意,这只是一个例子,请完整引入你所需要的组件)

文件 `@/components/use.js`
文件 `@/core/lazy_lib/component_use.js`

```javascript
import Vue from 'vue'
Expand Down Expand Up @@ -64,15 +64,15 @@
```


3. 最后在 `main.js` 中引入 `@/components/use.js` 文件即可,如下
3. 最后在 `main.js` 中引入 `@/core/lazy_use.js` 文件即可,如下

```javascript
import Vue from 'vue'
import App from './App'
// 引入 按需组件的统一引入文件
import './components/use'
import './core/use'
import './style/index.less'
Expand All @@ -85,12 +85,6 @@
```

**具体完整实现可参考分支 [feature/demand_load](https://github.com/sendya/ant-design-pro-vue/tree/feature/demand_load)**







## 其他 减少打包大小
Expand Down
14 changes: 11 additions & 3 deletions docs/multi-tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,16 @@
## 让框架支持打开的页面增加多标签,可随时切换

### 关于如何移除该功能 组件
1. 移除 `/src/components/layouts/BasicLayout.vue` L3, L12, L19
1. 移除 `/src/layouts/BasicLayout.vue` L44, L69, L80
```vue
<multi-tab v-if="$store.getters.multiTab"></multi-tab>
// L44
<multi-tab v-if="multiTab"></multi-tab>
// L69
import MultiTab from '@/components/MultiTab'
// L80
MultiTab,
```
2. 移除 `/src/config/defaultSettings.js` L25

Expand All @@ -17,4 +24,5 @@

5. 删除组件目录 `src/components/MultiTab`

> 以上 `L x` 均代表行N ,如 L3 = 行3
> 以上 `L x` 均代表行N ,如 L3 = 行3
58 changes: 33 additions & 25 deletions src/components/Table/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Table 重封装组件说明
</template>
<script>
import STable from '@/components/table/'
import STable from '@/components'
export default {
components: {
Expand Down Expand Up @@ -210,7 +210,7 @@ Table 重封装组件说明
----
> 除去 `a-table` 自带属性外,还而外提供了一些额外属性属性

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------------------------------- | ----------------- | ------ |
| alert | 设置是否显示表格信息栏 | [object, boolean] | null |
Expand All @@ -231,35 +231,43 @@ alert: {
----

> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码:
(需要注意的是,这里的修改是全局性的,意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
> (需要注意的是,这里的修改是全局性的,意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
>
> 文档中的结构有可能由于组件 bug 进行修正而改动。实际修改请以当时最新版本为准
修改 `@/components/table/index.js`132 行起
修改 `@/components/table/index.js`156 行起



```javascript
result.then(r => {
this.localPagination = Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
})

// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.data.length == 0 && this.localPagination.current != 1) {
this.localPagination.current--
this.loadData()
return
}
this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
}) || false
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
this.localPagination.current--
this.loadData()
return
}

// 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
// 当情况满足时,表示数据不满足分页大小,关闭 table 分页功能
!r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
this.localDataSource = r.data // 返回结果中的数组数据
this.localLoading = false
});
// 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
// 当情况满足时,表示数据不满足分页大小,关闭 table 分页功能
try {
if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
this.localPagination.hideOnSinglePage = true
}
} catch (e) {
this.localPagination = false
}
console.log('loadData -> this.localPagination', this.localPagination)
this.localDataSource = r.data // 返回结果中的数组数据
this.localLoading = false
})
```
返回 JSON 例子:
```json
Expand Down Expand Up @@ -330,4 +338,4 @@ result.then(r => {
更新时间
----

该文档最后更新于: 2019-01-21 AM 08:37
该文档最后更新于: 2019-06-23 PM 17:19
13 changes: 9 additions & 4 deletions src/router/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
| icon | 路由在 menu 上显示的图标 | [string,svg] | - |
| keepAlive | 缓存该路由 | boolean | false |
| hidden | 配合`alwaysShow`使用,用于隐藏菜单时,提供递归到父菜单显示 选中菜单项_(可参考 个人页 配置方式)_ | boolean | false |
| hidden | 配合`hideChildrenInMenu`使用,用于隐藏菜单时,提供递归到父菜单显示 选中菜单项_(可参考 个人页 配置方式)_ | boolean | false |
| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false |
| permission | 与项目提供的权限拦截匹配的权限,如果不匹配,则会被禁止访问该路由页面 | array | [] |

Expand All @@ -72,7 +72,7 @@ const asyncRouterMap = [
children: [
{
path: '/dashboard',
component: Layout,
component: RouteView,
name: 'dashboard',
redirect: '/dashboard/workplace',
meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']},
Expand Down Expand Up @@ -131,10 +131,15 @@ const asyncRouterMap = [

> 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
> 2. 增加新的路由应该增加在 '/' (index) 路由的 `children`
> 3. `permission` 可以进行自定义修改,只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
> 3. 子路由的父级路由必须有 `router-view` 才能让子路由渲染出来,请仔细查阅 vue-router 文档
> 4. `permission` 可以进行自定义修改,只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)


附权限路由结构:

![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)



第二种前端路由由后端动态生成的设计,可以前往官网文档 https://pro.loacg.com/docs/authority-management 参考
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -11087,10 +11087,10 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
source-list-map "^2.0.0"
source-map "~0.6.1"

webpack-theme-color-replacer@^1.1.5:
version "1.1.5"
resolved "https://registry.npmjs.org/webpack-theme-color-replacer/-/webpack-theme-color-replacer-1.1.5.tgz#b2659220341e55bedc6eee3eebeec0be56b7995e"
integrity sha512-D3VQC387qKOrZz2/SMc7+rRxbioT56+SwVhZOkucDfun86ByXCwrfNfhlN+SiufHJp/rDQUL9f27gKa+00Xvgw==
webpack-theme-color-replacer@^1.2.15:
version "1.2.15"
resolved "https://registry.yarnpkg.com/webpack-theme-color-replacer/-/webpack-theme-color-replacer-1.2.15.tgz#f42ab038974d8a6ee85a074b65de0cfc17c9f472"
integrity sha512-tht5fk6ce6ZwXqPbvkLBJMS+iAM3H60pyexKvZHEbkHpQ1Onq2Y0u6+wUbNBQ/QfDEvCTX5MSkNfD2w/ZJEeKg==

"webpack@>=4 < 4.29":
version "4.28.4"
Expand Down

0 comments on commit 161934d

Please sign in to comment.