lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改文档 

Former-commit-id: edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly fddabeee0d8e10f2eba15fa501c08d293b92b1fb [formerly 98d9bab87141373a7da7e7197242376f8326dfc6]]]]]
Former-commit-id: 1554a4a75d3c8d04269a2c702c810f14c956d058
Former-commit-id: 537f5148a1ae0b9e454b4e6e82efada5e9086181
Former-commit-id: 30f36236c6e27385e85cc83264b9d85c9c91eb01 [formerly 57f1072da69969a18be9e757ca086d030fae8dc4]
Former-commit-id: d56dc8a2e39ba7fd380dd887ba0f5f9b548eabac
Former-commit-id: 15d9368f35197f6f20a615d382a619f7c1e5d17c
Former-commit-id: cf3e4dfa69c36c23209b29295c38407fbccc6ac0
Former-commit-id: f8444e2f52271a684daf90947b7b229090ff6b00
Former-commit-id: 37ddf26c726207755e0711db83d38a2800fed0f1
This commit is contained in:
liyang 2018-07-22 16:01:09 +08:00
parent d19334b1ac
commit c473e5d1e5
26 changed files with 184 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
docs/zh/components/container.md
View File

@ -17,6 +17,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
页面内容较少时，container 也会填满主区域：
``` vue
<template>
<d2-container>
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_normal_short@2x.png)
页面有较多内容时会在侧面产生滚动条
@ -25,6 +33,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
支持 header 和 footer 插槽，两个区域分别会固定在主体区域的顶部和底部，内容压缩至中间
``` vue
<template>
<d2-container>
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_slot_short@2x.png)
如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间
@ -33,6 +51,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示
``` vue
<template>
<d2-container scroll>
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_short@2x.png)
超出一屏后在滚动时显示自定义滚动条
@ -41,12 +67,30 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会出现在 header 和 footer 之间
``` vue
<template>
<d2-container scroll>
<template slot="header">Header</template>
内容
<template slot="footer">Header</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_long-slot@2x.png)
## card
卡片模式适用于简单的小页面，可以方便地实现下面的布局效果：
``` vue
<template>
<d2-container type="card">
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_normal_short@2x.png)
如果内容超出一屏长度，会在右侧显示滚动条
@ -59,6 +103,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部
``` vue
<template>
<d2-container type="card">
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_slot_short@2x.png)
如果使用插槽后内容超出一屏，滚动条会在 header 和 footer 之间显示
@ -71,6 +125,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
设置 scroll 属性可以启用自定义滚动条，滚动条在内容不满一屏时不会显示
``` vue
<template>
<d2-container type="card" scroll>
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_bs_short@2x.png)
超出一屏后在滚动时显示自定义滚动条
@ -79,6 +141,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示
``` vue
<template>
<d2-container type="card" scroll>
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png)
如果使用插槽后内容超出一屏，自定义滚动条滚动到底部后主体区域依然会距离底部 20px 距离
@ -89,6 +161,26 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
ghost 模式适合对页面有定制需求的用户，此模式生成一个没有背景颜色的页面区域
``` vue
<template>
<d2-container type="ghost">
内容
</d2-container>
</template>
```
该模式默认没有内边距，示例中的内边距样式需要自行添加，比如可以在组件内嵌添加一层带有 .d2-pt 和 .d2-pb class 的 div，像下面这样
``` vue
<template>
<d2-container type="ghost">
<div class="d2-pt d2-pb">
内容
</div>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_normal_short@2x.png)
如果内容超出一屏长度，会在右侧显示滚动条
@ -97,6 +189,30 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部
``` vue
<template>
<d2-container type="ghost">
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
如果你希望有内边距：
``` vue
<template>
<d2-container type="ghost">
<template slot="header">Header</template>
<div class="d2-pt d2-pb">
内容
</div>
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_slot_short@2x.png)
如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间
@ -105,6 +221,26 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示
``` vue
<template>
<d2-container type="ghost" scroll>
内容
</d2-container>
</template>
```
同样，如果你希望有内边距：
``` vue
<template>
<d2-container type="ghost" scroll>
<div class="d2-pt d2-pb">
内容
</div>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_short@2x.png)
超出一屏后在滚动时显示自定义滚动条
@ -113,6 +249,30 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示
``` vue
<template>
<d2-container type="ghost" scroll>
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
有内边距：
``` vue
<template>
<d2-container type="ghost" scroll>
<template slot="header">Header</template>
<div class="d2-pt d2-pb">
内容
</div>
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_long-slot@2x.png)
## 注

1
package.json
View File

@ -32,7 +32,6 @@
"mockjs": "^1.0.1-beta3",
"papaparse": "^4.3.6",
"particles.js": "^2.0.0",
"path-posix": "^1.0.0",
"quill": "^1.3.4",
"screenfull": "^3.3.2",
"simplemde": "^1.11.2",

1
public/script/D2 Admin _ 页面容器.html.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
ca3041fad6584ca08b9644dea53fc35fb22c1340

1
public/script/D2 Admin _ 页面容器_files/0.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
d9cbf81aa5b093333bb37b2d7646629c69e7af09

1
public/script/D2 Admin _ 页面容器_files/1.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
a9aa143df056f6efd0b9a4b4389edf8a7e992a30

1
public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
7c142f7d1761e08cd0d149ef48035f992edc49c6

1
public/script/D2 Admin _ 页面容器_files/2018-07-22-autorename-1-2018-07-22-12-06-18-space-main@2x.png.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
084a49e870170734fd082f0ff5ea9f1a55a1bbe9

1
public/script/D2 Admin _ 页面容器_files/5.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
c371170de44b576d18863afbf90d5ed93f7e0b9b

1
public/script/D2 Admin _ 页面容器_files/8.16c05c072aa7d1e80f5f.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
f9c743a42479bb60c4ea6814d9c6249d5f111920

1
public/script/D2 Admin _ 页面容器_files/8.1a86ff7b0854a3b20ddb.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
113965b918b3129d4c47460939dff74734a6abd3

1
public/script/D2 Admin _ 页面容器_files/8.2bbfd08d387098c2cc24.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
7e2cf6fcadebade1312a895397814bf3281c2ebb

1
public/script/D2 Admin _ 页面容器_files/8.31f66d13256dff2e041d.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
db920e673e1c1e6a4be6e0bbf7062f7e5533a8f6

1
public/script/D2 Admin _ 页面容器_files/8.33b0903ae2680b6cc5d1.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
ed7a78e0062678b0ea8978c60105fbd640e7a775

1
public/script/D2 Admin _ 页面容器_files/8.405819c2931faa9728b2.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
a3935847dc878246a8391122053974502e754a33

1
public/script/D2 Admin _ 页面容器_files/8.4337175c9890009f0cba.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
e5337c58e510c34b302d729ef9d51030a919c1e6

1
public/script/D2 Admin _ 页面容器_files/8.695c4faf6c467ef228b9.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
ce86f8bb8ce0a55c8768afbe3006fc33464840e0

1
public/script/D2 Admin _ 页面容器_files/8.73f7958accdaaf450882.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
86367437b595a9f512586d2ceda8a6ce4431014a

1
public/script/D2 Admin _ 页面容器_files/8.90f95ed9c8637880bd76.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
10eb99c7fc336bb162cae103d20f6b351fe63876

1
public/script/D2 Admin _ 页面容器_files/8.9d0facf2c7be3274e32f.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
ccaaa86c08e8a3092ae0bf03034715b3b57a12a1

1
public/script/D2 Admin _ 页面容器_files/8.9fbf1ac904a38577f62d.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
69319a69f0c7f05c7340d1955d7c5ef8547fc1ac

1
public/script/D2 Admin _ 页面容器_files/8.bb059bb0e8823ffabaac.hot-update.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
e7dae1b2d8b5763f784ff516134304f490610711

1
public/script/D2 Admin _ 页面容器_files/8.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
a0aae6a6cf78a737b01add2a71941c98c5583de0

1
public/script/D2 Admin _ 页面容器_files/9.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
86372efafa6eacbe78c86d279b060474dc4c106d

1
public/script/D2 Admin _ 页面容器_files/app.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
9ea54d9c4f8651004bb433336047e48a9179c923

1
public/script/D2 Admin _ 页面容器_files/hm.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
c27d9abe287ab7ecc39ef5d9ca36fb712ac8605f

2
src/store/modules/d2admin.js.REMOVED.git-id
View File

@ -1 +1 @@
1e89dc28cf748ef4d1f3174b7b791e527d4a4c1b
37e7e9944cffb10558313e68774d41f91ba60d16